2

I am creating an app with Electron and Vue (using js not ts). When I run the app using npm run electron:serve the app runs fine.

I now want to build a Windows exe so I can distribute my app. I have tried using electron-builder, electron-packager and electron-forge. Whenever I can get the build to finish, running the exe throws the cannot use import statement outside a module error (referring to the first import statement it finds, i.e. import { app, protocol, BrowserWindow } from 'electron').

I've tried adding "type":"module" to my package.json but (due a bug in Vue, according to this question), that throws Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]

I've also tried changing all my import statements to require but this doesn't work because some of the node modules I'm using use import and the error just throws for those instead.

I'm tearing my hair out over this. Where do I go from here?

UPDATE:

I have found a workaround for the Vue bug and posted my findings on the linked question. I can now add "type":"module" to my package.json.

However, I now get an error thrown when I run npm run electron:serve and from my built exe:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: <my_project_root>\dist_electron\index.js
require() of ES modules is not supported.
require() of <my_project_root>\dist_electron\index.js from <my_project_root>\node_modules\electron\dist\resources\default_app.asar\main.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.

To be clear, I'm not using require in any of my source code, but the compiled(?) version does? What's going on here?

UPDATE 2:

As requested, here is a minimal reproducible example that maintains original folder structure, configs and package.json

James Batchelor
  • 99
  • 1
  • 1
  • 14
  • "_Where do I go from here?_" - Away from Vue? That seems to be the limiting factor. – Randy Casburn Nov 26 '21 at 00:31
  • @RandyCasburn I've updated my question. I've worked around the Vue bug but am still having issues, you have any idea? – James Batchelor Nov 26 '21 at 14:18
  • For troubleshooting purposes only, disable Node integration - your app will likely break, but we're looking for the ERR_REQUIRE_ESM to go away. – Randy Casburn Nov 26 '21 at 14:59
  • @RandyCasburn I'm assuming you're referring to my Electron webPreferences, in which case, nodeIntegration is already set to false since I'm using contextBridge and ipcRenderer in /public/preload.js – James Batchelor Nov 26 '21 at 15:11
  • OK - I'm done guessing. You haven't identified the version of Vue, Electron, if you're using Babel, or Webpack or both, etc. There are many, many details that are needed in order to help with this. You'll need to provide a [example] that includes the correct versions of all including your build configs etc. Best of luck to you. – Randy Casburn Nov 26 '21 at 15:26
  • @RandyCasburn I've now updated the question with a link to a minimal reproducible example – James Batchelor Nov 26 '21 at 16:58
  • @JamesBatchelor have you fixed this, can you please show me your solution, I have the same problem. – vanminhquangtri Jun 26 '23 at 09:27
  • @vanminhquangtri Sorry, it has been rather a while since I touched this project, either I found a fix or a workaround because I did get it working but I don't remember the exact details. It might help to check out the project on my github: https://github.com/Spatchy/Dirk-Valentine-Level-Creator I'm sorry this is all I can offer right now :( – James Batchelor Jun 30 '23 at 08:38
  • thank @JamesBatchelor, I get problem because the main property is set is wrong. I should be point to the the js that is built, not the original file. – vanminhquangtri Jun 30 '23 at 16:35

0 Answers0