Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"type": "module" in package.json for Vite templates #3502

Open
3 tasks done
cherewaty opened this issue Feb 23, 2024 · 10 comments
Open
3 tasks done

"type": "module" in package.json for Vite templates #3502

cherewaty opened this issue Feb 23, 2024 · 10 comments

Comments

@cherewaty
Copy link

cherewaty commented Feb 23, 2024

Pre-flight checklist

  • I have read the contribution documentation for this project.
  • I agree to follow the code of conduct that this project uses.
  • I have searched the issue tracker for a bug that matches the one I want to file, without success.

Electron Forge version

7.3.0

Electron version

29.0.1

Operating system

macOS 14.3.1

Last known working Electron Forge version

No response

Expected behavior

I wanted to try out the newly stable @remix-run/dev Vite plugin in combination with electron-forge. I initialized a new project with the create-electron-app vite-typescript template, then started layering on pieces like dev and build scripts in package.json.

Actual behavior

I got remix vite:dev working with an isolated vite.remix.config.ts, but then remix vite:build ran into SyntaxError: Cannot use import statement outside a module. Adding "type": "module" to my-app's package.json seemed to fix the problem, but then electron-forge scripts started failing.

Steps to reproduce

For vite-typescript template:

  • npm init electron-app@7.3.0 my-app -- --template=vite-typescript
  • Add "type": "module" to package.json.
  • npm start
An unhandled rejection has occurred inside Forge:
Error: Must use import to load ES Module: /my-app/forge.config.ts
require() of ES modules is not supported.
require() of /my-app/forge.config.ts from /my-app/node_modules/@electron-forge/core/dist/util/forge-config.js is an ES module file as it is a .ts file whose nearest parent package.json contains "type": "module" which defines all .ts files in that package scope as ES modules.
Instead change the requiring code to use import(), or remove "type": "module" from /my-app/package.json

For vite template:

  • npm init electron-app@7.3.0 my-app -- --template=vite
  • Add "type": "module" to package.json.
  • npm start
An unhandled rejection has occurred inside Forge:
Error [ERR_REQUIRE_ESM]: require() of ES Module /my-app/forge.config.js from /my-app/node_modules/@electron-forge/core/dist/util/forge-config.js not supported.
forge.config.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 either rename forge.config.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 /my-app/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
at exports.default (/my-app/node_modules/@electron-forge/core/dist/util/forge-config.js:140:26)
at async /my-app/node_modules/@electron-forge/core/dist/api/start.js:44:35
at async Task.task (/my-app/node_modules/@electron-forge/tracer/dist/index.js:58:20)
at async Task.run (/my-app/node_modules/listr2/dist/index.cjs:978:11)
at async /my-app/node_modules/p-map/index.js:57:22

Additional information

Seems related to #3439, and does not appear to be solved with #3468

This is likely causing friction still with SvelteKit as well.

@joezappie
Copy link

#3468 did not fix my issue #3439 unfortunately.

@jdms754
Copy link

jdms754 commented Feb 28, 2024

I just went through this. Change forge.config.ts to forge.config.cts. In vite.main.config.ts, change formats from ['cjs'] to ['es']. You will also need to polyfill or get rid of __dirname and require() in main.ts. You. can use https://www.npmjs.com/package/vite-plugin-require to polyfill require. I just got rid of __dirname. Here is my (super professional) sandbox. I was also testing support for TypeScript 5 decorators, which do work.

@junagao
Copy link

junagao commented Feb 29, 2024

@jdms754, I followed your steps but got this error: Error: Unable to use specified module loaders for ".cts". maybe I'm missing some config?

@bqhuyy
Copy link

bqhuyy commented Feb 29, 2024

@jdms754 thanks a lot. That's worked!

@junagao
Copy link

junagao commented Feb 29, 2024

@jdms754 I have started fresh and it worked now. thank you! ❤️

the difference I had was that in the tsconfig.json file I had "module": "es2022" instead of "module": "nodenext".

@RobertWHurst
Copy link

RobertWHurst commented Apr 13, 2024

What about when one wants to use moduleResolution bundler? moduleResolution NodeNext isn't technically correct given that forge uses vite/webpack to build the project.

@jgresham
Copy link

I just went through this. Change forge.config.ts to forge.config.cts. In vite.main.config.ts, change formats from ['cjs'] to ['es']. You will also need to polyfill or get rid of __dirname and require() in main.ts. You. can use https://www.npmjs.com/package/vite-plugin-require to polyfill require. I just got rid of __dirname. Here is my (super professional) sandbox. I was also testing support for TypeScript 5 decorators, which do work.

Thanks!
And for those who are looking for a quick replacement of __dirname, this seems to be working for me

import * as url from 'node:url';
const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
// use __dirname now
@GitMurf
Copy link

GitMurf commented Apr 20, 2024

@joezappie any luck on figuring this out? I was also confused by why your gh issue xxx was closed when it does not appear ESM has been addressed with the vite-typescript template as in v7.4 I still see commonjs in tsconfig and the build > lib > format as 'cjs' in the vite config. Thanks in advance if there is any help you can provide me based on your own troubleshooting and research!

@joezappie
Copy link

I have not had any luck in getting esm to work in main yet. I ended up just using electron-vite for my current project instead. Hopefully I can switch back to forge in the near future once this is supported.

@jdms754
Copy link

jdms754 commented Jul 5, 2024

What about when one wants to use moduleResolution bundler? moduleResolution NodeNext isn't technically correct given that forge uses vite/webpack to build the project.

Here is a commit showing changes to use bundler module resolution with Vite + TypeScript template. I had to make forge.config a .js file - that is the only way I have been able to get it to work so far.

jdms754/forge-vite-bundler@00f6310

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment