Using ESM in Webpack-TypeScript Template

[fras2560]

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

Electron version

33.2.1

Operating system

macOS Sequoia 15.1

Last known working Electron Forge version

No response

Expected behavior

Able to start the template

Actual behavior

npm run start

fresh@1.0.0 start
electron-forge start

✔ Checking your system
✔ Locating application
✖ Loading configuration
›
1. Must use import to load ES Module: /fresh/forge.config.ts
require() of ES modules is not supported.
require() of /resh/forge.config.ts from
/fresh/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
/Users/dallas/Documents/Github/electron-test/fresh/package.json.
2. Unknown file extension ".ts" for /fresh/forge.config.ts
◼ Preparing native dependencies
◼ Running generateAssets hook
◼ Running preStart hook

Failed to load: fresh/forge.config.ts

An unhandled rejection has occurred inside Forge:
Error:

1. Must use import to load ES Module: /fresh/forge.config.ts
   require() of ES modules is not supported.
   require() of /fresh/forge.config.ts from /fresh/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 /fresh/package.json.

2. Unknown file extension ".ts" for /fresh/forge.config.ts

Steps to reproduce

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

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

Now run npm start

Additional information

I am investigating a project and the work required to update to ESM. Since electron-store is a native ESM now and using an older version of the store. I was running into some issue with the project when following

https://www.electronjs.org/docs/latest/tutorial/esm
https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

I tried implementing the various suggestions seen in

#3671
#3684

[fras2560]

Opening this issue since I cannot find a way to use ESM with the Webpack-Typescript template. Just looking for the steps to make the template work before trying on a larger project.

[fras2560]

@erickzhao I am trying to use 7.8.1 and the webpack-typescript template. I am seeing an reference error:
ReferenceError: __dirname is not defined in ES module scope
In the outputted code I see:

/******/ 	/* webpack/runtime/compat */
/******/ 	
/******/ 	if (typeof __webpack_require__ !== 'undefined') __webpack_require__.ab = __dirname + "/native_modules/";

Am I correct this is a Webpack config issue? Is there a way to solve this?

  {
    // We're specifying native_modules in the test because the asset relocator loader generates a
    // "fake" .node file which is really a cjs file.
    test: /native_modules[/\\].+\.node$/,
    use: 'node-loader',
  },

[royalsrivastavagithub]

I'm encountering the same challenge trying to fully adopt ESM in this project. I need to integrate an ESM-only package, but the current Webpack template defaults to CommonJS for the main process. I've made several attempts to configure the build for pure ESM output, but I keep running into issues such as missing CommonJS globals (module or __dirname) and runtime errors.

It would be great to have official guidance or a working example of an Electron Forge + Webpack setup that fully supports ES modules end-to-end, especially for projects that depend on ESM-only native modules. This is a common pain point when trying to modernize Electron apps with ESM and TypeScript, and resolving it would benefit many developers.

[fras2560]

@erickzhao can we re-open this issue? I tried again with the latest version of electron-forge template. It is still not clear how this is to work.

I agree with @royalsrivastavagithub this is a sticking point. Would be nice to resolve this.