title: Correct way to export/define functions in Electron's Renderer
body: <p>I have a JS file that I'm importing into my Electron's "<a href="https://github.com/electron/electron/blob/master/docs/glossary.md#main-process" rel="nofollow noreferrer">main</a>" (or background process), <code>app.js</code>, using <code>require</code> (eg: <code>const myJS = require("./pathToMyJS/myJS");</code>) </p>
  
  <p>Contents of <code>myJS.js</code>:</p>
  
  <pre><code>module.exports = {
    mFunc: function mFunc(param1) {
      ...
    }
  };
  </code></pre>
  
  <p>And I can use <code>mFunc</code> in <code>app.js</code> as <code>myJS.mFunc(param1);</code> &amp; everything's great.</p>
  
  <p>Then, I tried to follow the same process for the "<a href="https://electronjs.org/docs/glossary#renderer-process" rel="nofollow noreferrer">renderer</a>" JS. So my <code>renderer.js</code> now imports <code>const myOtherJS = require("./myJS/myOtherJS");</code> where this other JS file follows the exact same <code>module.exports</code> logic as <code>myJS</code>.</p>
  
  <p>And the root HTML (<code>app.html</code>) declares the <code>renderer</code> as <code>&lt;script defer src="./renderer/renderer.js"&gt;&lt;/script&gt;</code>.</p>
  
  <p>But on launch, I get:</p>
  
  <pre><code>Uncaught TypeError: Cannot set property 'exports' of undefined
  at renderer.js? [sm]:34
  </code></pre>
  
  <p>Searching online, I came across this <a href="https://stackoverflow.com/a/33099764/1392578">answer</a> that mentions that the AMD way could be used instead of the commonJS way. So I tried the following: (not sure whether this is syntactically correct!)</p>
  
  <pre><code>define(
    ["renderer"],
  function rFunc(param1) { 
    ... }
  )
  </code></pre>
  
  <p>But that fails with:</p>
  
  <pre><code>Uncaught ReferenceError: define is not defined
  </code></pre>
  
  <p>So what's the correct way to have functions defined for export when using them in the renderer? What I've been doing so far is just to write the functions in their own JS files (eg: <code>function func1() { ...}</code>) &amp; declaring all of these files in the <code>app.html</code> as <code>&lt;script defer src="./funcFile1.js"&gt;&lt;/script&gt;</code>.</p>