electron / forge

:electron: A complete tool for building and publishing Electron applications
https://electronforge.io
MIT License
6.41k stars 505 forks source link

Typescript ESM forge.config.ts error #3671

Open codec-xyz opened 1 month ago

codec-xyz commented 1 month ago

Pre-flight checklist

Electron Forge version

7.4.0

Electron version

v31.3.1

Operating system

Windows 11

Last known working Electron Forge version

No response

Expected behavior

To not get an error when using a Typescript ESM forge.config.ts.

Actual behavior

Error are listed under the steps to reproduce section.

Steps to reproduce

Run npm init electron-app@7.4.0 my-new-app -- --template=vite-typescript

Add "type": "module", to package.json

[!Note]

To make other parts of the template work with "type": "module" In `vite.main.config` change `formats: ['cjs'],` to `formats: ['es'],` In `vite.preload.config` change `format: 'cjs',` to `format: 'es',` In `src/main.ts` change ``` if (require('electron-squirrel-startup')) { app.quit(); } ↓↓↓ import electronSquirrelStartup from 'electron-squirrel-startup'; if(electronSquirrelStartup) app.quit(); ``` and replace `__dirname` with `import.meta.dirname` You can also `npm install --save-dev @types/electron-squirrel-startup` and in `tsconfig.json` change `"module": "commonjs",` → `"module": "ESNext",` to make typescript happy.

Run npm run start

This result in this error...

› Must use import to load ES Module: C:\path\my-new-app\forge.config.ts
  require() of ES modules is not supported.
  require() of C:\path\my-new-app\forge.config.ts from C:\path\my-new-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
  C:\path\my-new-app\package.json.

An unhandled rejection has occurred inside Forge:
Error: Must use import to load ES Module: C:\path\my-new-app\forge.config.ts
require() of ES modules is not supported.
require() of C:\path\my-new-app\forge.config.ts from C:\path\my-new-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 C:\path\my-new-app\package.json.

However changing forge.config.ts to forge.config.js (and removing the type definitions) makes the error go away. So seemingly JS ES modules work but TS ES modules do not work.

Another option is changing the forge.config.ts to a forge.config.cts but it does not work with "module": "ESNext" (or other ES module options) in the tsconfig.json which gives the error...

  › Cannot use import statement outside a module

Failed to load: C:\path\my-new-app\forge.config.cts

An unhandled rejection has occurred inside Forge:
SyntaxError: Cannot use import statement outside a module

Additional information

No response

GitMurf commented 3 weeks ago

@codec-xyz I have found the same inconsistent behavior and to be honest I just tried every which combination until something was working for us (but feels very fragile and certainly not ideal long term). For us we went with using forge.config.cts and had to set module: commonjs which is not what we want overall but works for us right now. As you can see by my comments in the screenshot below, we also could not get ESNext to work which is what led us to settling on commonjs.

I believe it is related to:

Screenshot of tsconfig tweaks that finally got it to work for us:

image

GitMurf commented 3 weeks ago

@codec-xyz I am just glad I am not crazy and that you came to the same conclusion as me! I spent way too many hours (days) trying to figure this out and the imposter syndrome was starting to become real strong for me! haha

AmbitionsXXXV commented 1 week ago

I also encountered this problem. When I wanted to migrate to ESM according to the latest version of electron-store, I found that forge.config.ts did not support ESM.

justgo97 commented 1 week ago

Using the template shared in the issue below worked for me initially, But later I needed to change the preload script output to cjs and moduleResolution to Node because some issues started showing up, Not sure if it was a problem on my end but with those changes everything seem to work fine.

https://github.com/electron/forge/issues/3502#issuecomment-2211449451

SRichner commented 5 days ago

Having the same issue.