title: Reference error: document is not defined at compile / Electron
body: <p>I'm trying to make an electron app, but a Javascript error occurs in the main process. Basically I get this error after <code>npm start</code> :</p>
  
  <blockquote>
    <p>ReferenceError: document is not defined at compile
    (/Users/ege/Desktop/electron/main.js:23:13) at Object.
    (/Users/ege/Desktop/electron/main.js:35:1) at Object.
    (/Users/ege/Desktop/electron/main.js:37:3) at Module._compile
    (module.js:571:32) at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32) at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3) at loadApplicationPackage
    (/Users/ege/Desktop/electron/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:283:12)
    at Object.
    (/Users/ege/Desktop/electron/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:325:5)</p>
  </blockquote>
  
  <p>Here is main.js:</p>
  
  <pre><code>const electron = require('electron');
  const app = electron.app;
  const path = require('path');
  const url = require('url');
  
  const BrowserWindow = electron.BrowserWindow;
  var mainWindow;
  
  app.on('ready',function(){
  
  mainWindow = new BrowserWindow({width:1024 , height: 768 , backgroundColor:'#2e2c29'});
    mainWindow.loadURL(url.format({
      pathname:path.join(__dirname,'index.html'),
      protocol:'file:',
      slashes:true
  
  }));
  
  });
  
  function compile() {
  
      var html = document.getElementById("html");
      var css = document.getElementById("css");
      var js = document.getElementById("js");
      var code = document.getElementById("code").contentWindow.document;
  
       document.body.onkeyup = function(){
          code.open();
          code.writeln(html.value+"&lt;style&gt;"+css.value+"&lt;/style&gt;"+"&lt;script&gt;" + js.value + "&lt;/script&gt;");
          code.close();
        };
      };
  
  
  compile();
  </code></pre>