title: Electron nodeIntegration not working, also general weird Electron behavior
body: <p>I'm new to Electron, and I've really been struggling with getting it to work. I'm experiencing behavior I cannot explain, so here's a sum:
  I cannot get the communication between Electron and the html to work</p>
  <blockquote>
  <p>&quot;Uncaught ReferenceError: require is not defined&quot; inside the website, even though I have nodeIntegration:true</p>
  </blockquote>
  <pre><code>File Tree:
  ./
  index.html
  index.js
  package-lock.json
  package.json
  node_modules/
  </code></pre>
  <p>index.js:</p>
  <pre><code>const electron = require(&quot;electron&quot;);
  const Ffmpeg = require(&quot;fluent-ffmpeg&quot;);
  const CmdExec = require('child_process');
  const {
      app,
      BrowserWindow,
      ipcMain
  } = electron;
  
  function createWindow() {
  //If I put the main window ini into here, and then call app.on(&quot;ready&quot;, createWindow()); app says
  //&quot;Cant create window before ready&quot;, even though I just moved the funcion from inside ready to here..
  }
  
  app.on('ready', () =&gt; {
      mainWindow = new BrowserWindow({
          webPreferences: {
              nodeIntegration: true
          }
      });
      mainWindow.loadURL(`${__dirname}/index.html`);
  });
  ipcMain.on(&quot;video:submit&quot;, (event, path) =&gt;{
      CmdExec.exec(&quot;echo hello&quot;, (value)=&gt;{console.log(value)});
  });
  </code></pre>
  <p>html:</p>
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;&quot;&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h1&gt;WELCOME!&lt;/h1&gt;
      &lt;script src=&quot;&quot; async defer&gt;&lt;/script&gt;
      &lt;form action=&quot;&quot;&gt;
          &lt;div&gt;
              &lt;br&gt;
              &lt;label for=&quot;&quot;&gt;&lt;/label&gt;
              &lt;input type=&quot;file&quot; accept=&quot;video/*&quot; name=&quot;&quot; id=&quot;&quot;&gt;
          &lt;/div&gt;
          &lt;button type=&quot;submit&quot;&gt;get info&lt;/button&gt;
      &lt;/form&gt;
  
      &lt;script&gt;
          const electron = require(&quot;electron&quot;);
  
          electron.send('perform-action', args);
  
          document.querySelector(&quot;form&quot;).addEventListener(&quot;submit&quot;, (event) =&gt; {
              event.preventDefault();
              const {path} = document.querySelector(&quot;input&quot;).files[0];
              window.api.send(&quot;video:submit&quot;, path);
          });
              //Tried multiple methos Ive found on stackoverflow,, dont think I implemented them right 
              //though
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>package.json:</p>
  <pre><code>{
    &quot;name&quot;: &quot;media_encoder&quot;,
    &quot;version&quot;: &quot;1.0.0&quot;,
    &quot;description&quot;: &quot;&quot;,
    &quot;main&quot;: &quot;index.js&quot;,
    &quot;scripts&quot;: {
      &quot;electron&quot;: &quot;electron .&quot;
    },
    &quot;author&quot;: &quot;&quot;,
    &quot;license&quot;: &quot;ISC&quot;,
    &quot;dependencies&quot;: {
      &quot;electron&quot;: &quot;^12.0.0&quot;
    }
  }
  </code></pre>