Skip to content

Typescript ESM forge.config.ts error #3671

Open
@codec-xyz

Description

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.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

Activity

GitMurf

GitMurf commented on Aug 21, 2024

@GitMurf

@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

GitMurf commented on Aug 21, 2024

@GitMurf

@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

AmbitionsXXXV commented on Sep 4, 2024

@AmbitionsXXXV

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

justgo97 commented on Sep 4, 2024

@justgo97

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.

#3502 (comment)

SRichner

SRichner commented on Sep 7, 2024

@SRichner

Having the same issue.

rtritto

rtritto commented on Sep 21, 2024

@rtritto

This issue should be related to rechoir dependency that currently doesn't support ESM (gulpjs/rechoir#43).

Electron forge v7.5.0 add support with ESM but, for this issue, nothing is changed.

Repro

  • yarn init -y

  • yarn set version berry

  • yarn add -D @electron-forge/cli @electron-forge/plugin-vite electron ts-node typescript vite (note ts-node dependency related to Missing ts-node and esbuild-register as optional peer dependencies #3609)

  • Create an empty forge.config.ts file

  • yarn electron-forge start

  • Output:

    ✔ Checking your system
    ✔ Locating application
    ✖ Loading configuration
    
      1. Must use import to load ES Module: C:\<PROJECT_PATH>\forge.config.ts
      require() of ES modules is not supported.
      require() of C:\<PROJECT_PATH>\forge.config.ts from
      C:\Users\<USER>\AppData\Local\Yarn\Berry\cache\@electron-forge-core-patch-50fd2dab5c-10c0.zip\node_modules\@electron-forge\core\helper\dynamic-import.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:\<PROJECT_PATH>\package.json.
    
      2. Unknown file extension ".ts" for C:\<PROJECT_PATH>\forge.config.ts
    ◼ Preparing native dependencies
    ◼ Running generateAssets hook
    
    Failed to load: C:\<PROJECT_PATH>\forge.config.ts
    
    An unhandled rejection has occurred inside Forge:
    Error:
    1. Must use import to load ES Module: C:\<PROJECT_PATH>\forge.config.ts
    require() of ES modules is not supported.
    require() of C:\<PROJECT_PATH>\forge.config.ts from C:\Users\<USER>\AppData\Local\Yarn\Berry\cache\@electron-forge-core-patch-50fd2dab5c-10c0.zip\node_modules\@electron-forge\core\helper\dynamic-import.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:\<PROJECT_PATH>\package.json.
    
    2. Unknown file extension ".ts" for C:\<PROJECT_PATH>\forge.config.ts

Maybe rechoir dependency can be replaced with another dependency (e.g. tsx #3676 (comment)) that support ESM or we can contribute to gulpjs/rechoir#43.

FYI @erickzhao @MarshallOfSound

rtritto

rtritto commented on Sep 21, 2024

@rtritto

Related/duplicated/same issues: #3230 #3502 #3608

chetbox

chetbox commented on Oct 30, 2024

@chetbox
Contributor

I found that rechoir supports esbuild. You can remove ts-node from your devDependencies and replace it with esbuild-register and then forge.config.ts can be loaded successfully.

With Yarn:

yarn remove ts-node
yarn add --dev esbuild-register
rtritto

rtritto commented on Oct 30, 2024

@rtritto

I found that rechoir supports esbuild. You can remove ts-node from your devDependencies and replace it with esbuild-register and then forge.config.ts can be loaded successfully.

With Yarn:

yarn remove ts-node
yarn add --dev esbuild-register

Thanks it works (youn need to install also esbuild because it's a peer dependencies of esbuild-register).

I updated title of #3609 and added a comment (#3609 (comment)).

fras2560

fras2560 commented on Dec 9, 2024

@fras2560
Contributor

I am running into the issue as well but with webpack. Anyone else have this issue?

Steps to reproduce

Run npm init electron-app@latest my-new-app -- --template=webpack-typescript

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

Error

Failed to load: electron-test/issue-3671/forge.config.js

An unhandled rejection has occurred inside Forge:
Error [ERR_REQUIRE_ESM]:

  1. require() of ES Module electron-test/issue-3671/forge.config.js from electron-test/issue-3671/node_modules/@electron-forge/core/helper/dynamic-import.js not supported.
    Instead change the require of forge.config.js in electron-test/issue-3671/node_modules/@electron-forge/core/helper/dynamic-import.js to a dynamic import() which is available in all CommonJS Modules.

12 remaining items

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

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Typescript ESM forge.config.ts error · Issue #3671 · electron/forge