2

I'm new to Electron and Node. I can't seem to require() a local .js file from another one in Electron and I don't understand the problem. I think what I'm missing is something pretty simple, but I can't find it.

Here's my file structure:

/
package-lock.json
node_modules
main.js
package.json
game/
  ...
  test.js
  properties.js
assets/html/
  main_window.html
  • main.js only loads main_window.html into an Electron window and not much else.
  • I reference to test.js from inside the html file using <script src="../../game/test.js"></script>.
  • Here's test.js:

    const properties = require('./properties');
    ...
    
  • In return I get this error in Dev Tools console:

    Uncaught Error: Cannot find module './properties'
    

enter image description here

When I use node test.js command in the game folder, the file gets imported, everything works just fine. But when I switch to Electron and use npm start from root I think I'm requiring the local .js file as it should be, by putting a dot and a forward slash before its name. And despite being in the same folder as the test.js file, it can't seem to locate properties.js.

Also package.json file, just in case it might be needed:

{
  "name": "economy-board-game-electron",
  "version": "1.0.0",
  "description": "Recreation of that board game for educational purposes.",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "Edvin Boul",
  "license": "MIT",
  "dependencies": {
    "electron": "^4.0.1"
  }
}
4
  • 1
    i think the path may be relative to the html file, try doing ../../game/properties, and if that works, consider putting your main html entry point on the same level as your game directory
    – Dan Oswalt
    Jan 19, 2019 at 1:18
  • organizationally might be simpler to reason about, so you don’t have to write long backtracking paths
    – Dan Oswalt
    Jan 19, 2019 at 1:19
  • @DanOswalt Requiring the properties relative to the HTML file worked (require('./../../game/properties')). So I put the HTML file in the same folder as the .js files to not backtrack that much. Thank you very much. You can post it as an answer if you'd like so I can accept it. Jan 19, 2019 at 1:43
  • gladly, happy to help, electron is pretty great
    – Dan Oswalt
    Jan 19, 2019 at 3:10

2 Answers 2

9

The path may be relative to the html file, try doing ../../game/properties, and if that works, consider putting your main html entry point on the same level as your game directory –

Electron doesn’t require files to be structured in any special way, but organizationally might be simpler to reason about it that way so you don’t have to write long backtracking paths.

It’s also how most of their examples are done, they try to make it so you can pretty much keep a typical website structure.

1

I had the same problem and asked for this about one hour ago, just got the right answer (in the comments): Issue in requiring a custom module.

  • Removes your <script> tag which references test.js from your HTML.
  • Exports both your JS files with module.exports.Test = Test; and module.exports.Properties = Properties;. These instructions have to be in their respective file, and at the end. I assume that your classes (or whatever your want to export) are named Test and Properties.

  • Requires ./../../game/test in your HTML file, between <script> tags. (not sure about the path, but you need to start from your HTML file location)

  • Requires ./properties in test.js.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.