0

I am new to Javascript and started to make desktop apps with the help of nodejs and electron. The problem is that I can not use require() outside of my main.js file. But this is shown in some Tutorials I found online.

I searched for hours if I could find a solution, but I could not. I tried to reinstall nodejs, electron and the requirejs module.

  <div class="container">
    <form>
      <div>
        <label>Enter Item</label>
        <input type="text" id="item" autofocus>
      </div>
      <button class="waves-effect waves-light btn" type="submit">Add Item</button>
    </form>
  </div>

  <script>
    //should give back the item, so that it can be added to the shoppinglist in the main window
    const electron = require('electron');
    const {ipcRenderer} = electron;

    document.querySelector('form').addEventListener('submit', submitForm);

    function submitForm(e){
      e.preventDefault();
      const item = document.querySelector('#item').value;
      console.log(ipcRenderer);
      ipcRenderer.send('item:add', item);
    }
  </script>

Expected: When pressing the "Add item" button the entered item should appear in mainWindow

Actual: Nothing happens when pressing the button (Console says: "Uncaught ReferenceError: require is not defined")

Hao Wu
  • 17,573
  • 6
  • 28
  • 60
DoJoZei
  • 1
  • 2
    Possible duplicate of [Javascript require() function giving ReferenceError: require is not defined](https://stackoverflow.com/questions/23603514/javascript-require-function-giving-referenceerror-require-is-not-defined) – Easwar Jun 11 '19 at 14:28
  • possible duplicate of https://stackoverflow.com/a/19059825/10706585 – Shakti S Jun 11 '19 at 14:32
  • The questions which you declaring as a duplicate have nothing to do with electron. The OP is asking for an electron application where you CAN use require in your JS-Code – kSp Jun 11 '19 at 14:46
  • For me the Solution was: To add Node Modules to HtmlWebpackPlugin but I'm not a pro with electron so I can just give you hints and not a complete answer. – kSp Jun 13 '19 at 08:12
  • My HtmlWebpackPlugin Config: new HtmlWebpackPlugin({ filename: 'index.html', template: path.resolve(__dirname, '../src/index.ejs'), minify: { collapseWhitespace: true, removeAttributeQuotes: true, removeComments: true }, nodeModules: process.env.NODE_ENV !== 'production' ? path.resolve(__dirname, '../node_modules') : false }), – kSp Jun 13 '19 at 08:13

0 Answers0