Cannot Use "type": "module" in "package.json"

[PossiblyAnEngineer]

In my project I currently use both Electron and Vite for different parts of my software, but they share a common package.json, and are ultimately built into a single executable. I tried using this plugin for the Vite side and got the ERR_REQUIRE_ESM error from #23. So, following the comments from that issue, I added "type": "module" to my package.json. Now I get this error from my electron build:

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\...\project\dist\backend\main.js from C:\Users\...\project\node_modules\electron\dist\resources\default_app.asar\main.js not supported.  
C:\Users\...\project\dist\backend\main.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename C:\Users\...\project\dist\backend\main.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in C:\Users\...\project\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at Function.c._load (node:electron/js2c/asar_bundle:5:13343)
    at loadApplicationPackage (C:\Users\...\project\node_modules\electron\dist\resources\default_app.asar\main.js:110:16)
    at Object.<anonymous> (C:\Users\...\project\node_modules\electron\dist\resources\default_app.asar\main.js:222:9)
    at Function.c._load (node:electron/js2c/asar_bundle:5:13343)
    at Object.<anonymous> (node:electron/js2c/browser_init:185:3104)
    at Object../lib/browser/init.ts (node:electron/js2c/browser_init:185:3308)
    at __webpack_require__ (node:electron/js2c/browser_init:1:128)
    at node:electron/js2c/browser_init:1:1200
    at node:electron/js2c/browser_init:1:1267
    at Function.c._load (node:electron/js2c/asar_bundle:5:13343)

Renaming that output file to .cjs worked, but it just leads to a bunch of other issues, which I'm currently trying to resolve. Is there a way to use this plugin without setting "type": "module" in package.json?

[richardtallent]

Hmm.... there was before, but it was switched to ESM. Guess it's really not ready for prime time yet. I'll change it back in the next version.

[fermartz]

@richardtallent thanks for the plugin it helped me solve a headache.

@PossiblyAnEngineer I had the same problem using react so I converted Richard's solution to js instead of ts, then I imported it and added as a normal plugin.

Here is the import import { viteSingleFile } from "./single_file" And here is the code for adding the plugin

plugins: [
    react(),
    viteSingleFile(),
    createHtmlPlugin({
      minify: true,
    }),
  ],

Find the JS file here

[PossiblyAnEngineer]

Ahh, I see how it works. Since my Vite config file is also in typescript, I just copy-pasted Richard's code directly into my config, and it works fine now! So I can use that as a workaround. Thank you!

And yes, thank you for the plugin! It is very appreciated!

On a side note, you may want to run eslint on your code. On lines 33 and 38 you have regular expressions that contain [\./], and either the \ isn't escaped properly or you don't intend to escape .. I'm guessing it's supposed be [\\./].

[n1kk]

Encountered the same issue, can't add "type": "module" to my project since it'll break other things.

Maybe having cjs as default and adding mjs as additional export via the exports field in package.json could be an option? https://nodejs.org/api/packages.html#conditional-exports

[richardtallent]

Please try 0.10.0-beta and let me know if it helps. It should allow use in both CommonJS and ESM environments.

[PossiblyAnEngineer]

Please try 0.10.0-beta and let me know if it helps. It should allow use in both CommonJS and ESM environments.

It works great for my use case at least! Thank you for the update!