cherewaty commented 4 months ago

Pre-flight checklist

[X] I have read the contribution documentation for this project.
[X] I agree to follow the code of conduct that this project uses.
[X] 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 https://github.com/electron/forge/issues/3439, and does not appear to be solved with https://github.com/electron/forge/pull/3468

This is likely causing friction still with SvelteKit as well.

joezappie commented 4 months ago

3468 did not fix my issue #3439 unfortunately.

jdms754 commented 4 months ago

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 commented 4 months ago

@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 commented 4 months ago

@jdms754 thanks a lot. That's worked!

junagao commented 4 months ago

@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 commented 3 months ago

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 commented 2 months ago

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 commented 2 months ago

@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 commented 2 months ago

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 commented 6 days ago