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

[cherewaty]

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 [email protected] 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 [email protected] 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]

#3468 did not fix my issue #3439 unfortunately.

[jdms754]

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]

@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]

@jdms754 thanks a lot. That's worked!

[junagao]

@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]

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]

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]

@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]

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]

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

[isnolan]

那么当想要使用 moduleResolution 捆绑器时该怎么办？由于 forge 使用 vite/webpack 来构建项目，因此 moduleResolution NodeNext 在技术上并不正确。

以下是一个提交，显示了使用 Vite + TypeScript 模板的捆绑模块解析的更改。我必须创建forge.config一个.js文件 - 这是迄今为止我能够让它工作的唯一方法。

jdms754/forge-vite-bundler@ 00f6310

Thanks for your contribution, I have used esm.

[aentwist]

This issue has been VASTLY helpful. Thanks, @cherewaty , and especially Mr. @jdms754 !!

So about __dirname - apparently we have import.meta.dirname! It's a pretty new node feature, but it seems to be just that simple!

[afishhhhh]

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

.js not work.
Error: require() of ES Module forge-config.js not supported.

[BlackRam-oss]

Hi I created a template for my game engine.
in this template I give the possibility to use both elecron and start vitejs from browser to develop.

some time ago I found a way to use get "type": "module" https://github.com/DRincs-Productions/pixi-vn-react-template/blob/0cfd35cbbc0d8ecd28dda2d26f830ef4eca26071/src-electron/main.ts
but updating some libraries it doesn't work anymore, so now I had to remove "type": "module", to make it work.

but this is not the best because as vitejs points out to me:

I don't know if there is currently a way to make forge elecron work with "type": "module". However adding it to the base template would help many