webpack-typescript template can't resolve native node modules in webpack bundling

[selganor74]

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

Electron version

28.2.2

Operating system

Windows 10 22H2

Last known working Electron Forge version

No response

Expected behavior

Native node modules imported in preload.ts should be resolved correctly by webpack.

Actual behavior

"electron-forge start" fails at the webpack bundling, with this error:

√ Checking your system √ Locating application √ Loading configuration √ Preparing native dependencies [2s] √ Running generateAssets hook √ [plugin-webpack] Compiling main process code [2s] √ [plugin-webpack] Compiling main process code [2s] √ [plugin-webpack] Compiling main process code [2s] × [plugin-webpack] Launching dev servers for renderer process code › Compilation errors in the preload: group_0: asset main_window/preload.js 562 KiB [emitted] (name: main_window) runtime modules 26.…

An unhandled rejection has occurred inside Forge: Error: Compilation errors in the preload: group_0: asset main_window/preload.js 562 KiB [emitted] (name: main_window) runtime modules 26.4 KiB 12 modules modules by path ./node_modules/ 163 KiB modules by path ./node_modules/webpack-dev-server/client/ 71.8 KiB 16 modules modules by path ./node_modules/webpack/hot/.js 5.18 KiB ./node_modules/webpack/hot/dev-server.js 1.94 KiB [built] [code generated] ./node_modules/webpack/hot/log.js 1.74 KiB [built] [code generated] + 2 modules modules by path ./node_modules/html-entities/lib/.js 81.8 KiB ./node_modules/html-entities/lib/index.js 7.91 KiB [built] [code generated] ./node_modules/html-entities/lib/named-references.js 73 KiB [built] [code generated] ./node_modules/html-entities/lib/numeric-unicode-map.js 339 bytes [built] [code generated] ./node_modules/html-entities/lib/surrogate-pairs.js 537 bytes [built] [code generated] ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated] ./src/preload.ts 1.22 KiB [built] [code generated] external "events" 42 bytes [built] [code generated]

ERROR in ./src/preload.ts 25:24-37 Module not found: Error: Can't resolve 'fs' in 'C:\DriveD\projects\my-app\src' resolve 'fs' in 'C:\DriveD\projects\my-app\src' Parsed request is a module using description file: C:\DriveD\projects\my-app\package.json (relative path: ./src) Field 'browser' doesn't contain a valid alias configuration resolve as module C:\DriveD\projects\my-app\src\node_modules doesn't exist or is not a directory looking for modules in C:\DriveD\projects\my-app\node_modules single file module using description file: C:\DriveD\projects\my-app\package.json (relative path: ./node_modules/fs) no extension Field 'browser' doesn't contain a valid alias configuration C:\DriveD\projects\my-app\node_modules\fs doesn't exist .js Field 'browser' doesn't contain a valid alias configuration C:\DriveD\projects\my-app\node_modules\fs.js doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration C:\DriveD\projects\my-app\node_modules\fs.ts doesn't exist .jsx Field 'browser' doesn't contain a valid alias configuration C:\DriveD\projects\my-app\node_modules\fs.jsx doesn't exist .tsx Field 'browser' doesn't contain a valid alias configuration C:\DriveD\projects\my-app\node_modules\fs.tsx doesn't exist .css Field 'browser' doesn't contain a valid alias configuration C:\DriveD\projects\my-app\node_modules\fs.css doesn't exist C:\DriveD\projects\my-app\node_modules\fs doesn't exist C:\DriveD\projects\node_modules doesn't exist or is not a directory C:\DriveD\node_modules doesn't exist or is not a directory C:\node_modules doesn't exist or is not a directory

group_0 (webpack 5.90.1) compiled with 1 error in 5570 ms

Steps to reproduce

init a new electron-forge app with:

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

cd my-app

add this code in src/preload.ts

import * as fs from "fs";

const c = fs.readdirSync("C:\\");
console.log("dir", c);

npm start

Additional information

The same test made using vite-typescript template, works as expected. For the code to work in electron, the main BrowserWindow must be created with webPreferences.sandbox: false.

[JoueBien]

From memory I resolved this by: setting target: "web", in webpack.renderer.config.ts

[anovi]

Same problem here. Webpack can't resolve native node modules in preload.js. Node integration enabled. Has someone found any solution?