forge
forge copied to clipboard
electron
From template=typescript-webpack doesn't compile when using ipcRenderer
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.4.0
Electron version
31.3.1
Operating system
Windows 10 / 22H2 (OS Build 19045.4651)
Last known working Electron Forge version
?
Expected behavior
Compilation works.
Actual behavior
On running npm run start, compilation fails (see additional info)
Steps to reproduce
From a fresh install via
npm init electron-app@latest my-app -- --template=webpack-typescript
npm i -D electron # → issue #3273
just add the following to renderer.ts:
import { ipcRenderer } from 'electron';
ipcRenderer.on('msg', (ev, data) => console.log(data));
then run npm start
Additional information
Compilation output:
An unhandled rejection has occurred inside Forge:
Error: Compilation errors in the preload: group_0:
asset main_window/preload.js 553 KiB [emitted] (name: main_window)
runtime modules 26.4 KiB 12 modules
modules by path ./node_modules/ 160 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 78.9 KiB
./node_modules/html-entities/lib/index.js 4.84 KiB [built] [code generated]
./node_modules/html-entities/lib/named-references.js 73.1 KiB [built] [code generated]
./node_modules/html-entities/lib/numeric-unicode-map.js 389 bytes [built] [code generated]
./node_modules/html-entities/lib/surrogate-pairs.js 583 bytes [built] [code generated]
./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
./src/preload.ts 160 bytes [built] [code generated]
external "events" 42 bytes [built] [code generated]
group_0 (webpack 5.93.0) compiled successfully in 2249 ms
group_0:
assets by path native_modules/dist/locales/*.pak 38.3 MiB 55 assets
assets by path native_modules/dist/*.dll 21.5 MiB
asset native_modules/dist/libGLESv2.dll 7.68 MiB [emitted] (auxiliary name: main_window)
+ 5 assets
assets by path native_modules/dist/*.pak 5.65 MiB
asset native_modules/dist/resources.pak 5.29 MiB [emitted] (auxiliary name: main_window)
+ 2 assets
assets by path native_modules/dist/*.bin 950 KiB
asset native_modules/dist/v8_context_snapshot.bin 647 KiB [emitted] (auxiliary name: main_window)
asset native_modules/dist/snapshot_blob.bin 303 KiB [emitted] (auxiliary name: main_window)
assets by path main_window/ 643 KiB
asset main_window/index.js 643 KiB [emitted] (name: main_window)
asset main_window/index.html 262 bytes [emitted]
+ 8 assets
runtime modules 26.5 KiB 13 modules
modules by path ./node_modules/ 184 KiB
modules by path ./node_modules/webpack-dev-server/client/ 71.8 KiB 16 modules
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.84 KiB 6 modules
modules by path ./node_modules/webpack/hot/*.js 5.18 KiB 4 modules
modules by path ./node_modules/html-entities/lib/*.js 78.9 KiB 4 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 2.74 KiB 2 modules
./node_modules/electron/index.js 694 bytes [built] [code generated] [1 warning]
./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
./node_modules/events/events.js 14.5 KiB [built] [code generated]
modules by path ./src/ 4.3 KiB
./src/renderer.ts 1.15 KiB [built] [code generated]
./src/index.css 2.24 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/index.css 929 bytes [built] [code generated]
WARNING in ./node_modules/electron/index.js
Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
* "PROJECT_NODE/node_modules/electron/dist/LICENSE"
* "PROJECT_NODE/node_modules/electron/dist/LICENSES.chromium.html"
* "PROJECT_NODE/node_modules/electron/dist/chrome_100_percent.pak"
* and more ...
@ ./src/renderer.ts 30:19-38
1 warning has detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
ERROR in ./node_modules/electron/index.js 1:11-24
Module not found: Error: Can't resolve 'fs' in 'PROJECT_ROOT\node_modules\electron'
resolve 'fs' in 'PROJECT_ROOT\node_modules\electron'
Parsed request is a module
using description file: PROJECT_ROOT\node_modules\electron\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
looking for modules in PROJECT_ROOT\node_modules\electron\node_modules
single file module
using description file: PROJECT_ROOT\node_modules\electron\package.json (relative path: ./node_modules/fs)
no extension
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\electron\node_modules\fs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\electron\node_modules\fs.js doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\electron\node_modules\fs.ts doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\electron\node_modules\fs.jsx doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\electron\node_modules\fs.tsx doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\electron\node_modules\fs.css doesn't exist
PROJECT_ROOT\node_modules\electron\node_modules\fs doesn't exist
PROJECT_ROOT\node_modules\node_modules doesn't exist or is not a directory
looking for modules in PROJECT_ROOT\node_modules
single file module
using description file: PROJECT_ROOT\package.json (relative path: ./node_modules/fs)
no extension
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\fs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\fs.js doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\fs.ts doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\fs.jsx doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\fs.tsx doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\fs.css doesn't exist
PROJECT_ROOT\node_modules\fs doesn't exist
looking for modules in PROJECT_ROOT\..\node_modules
single file module
No description file found in PROJECT_ROOT\..\node_modules or above
no extension
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\..\node_modules\fs doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\..\node_modules\fs.js doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\..\node_modules\fs.ts doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\..\node_modules\fs.jsx doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\..\node_modules\fs.tsx doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\..\node_modules\fs.css doesn't exist
PROJECT_ROOT\..\node_modules\fs doesn't exist
PROJECT_ROOT\..\..\node_modules doesn't exist or is not a directory
PROJECT_ROOT\..\..\..\node_modules doesn't exist or is not a directory
@ ./src/renderer.ts 30:19-38
ERROR in ./node_modules/electron/index.js 2:13-28
Module not found: Error: Can't resolve 'path' in 'PROJECT_ROOT\node_modules\electron'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
resolve 'path' in 'PROJECT_ROOT\node_modules\electron'
Parsed request is a module
using description file: PROJECT_ROOT\node_modules\electron\package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
looking for modules in PROJECT_ROOT\node_modules\electron\node_modules
single file module
using description file: PROJECT_ROOT\node_modules\electron\package.json (relative path: ./node_modules/path)
no extension
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\electron\node_modules\path doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\electron\node_modules\path.js doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\electron\node_modules\path.ts doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\electron\node_modules\path.jsx doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\electron\node_modules\path.tsx doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\electron\node_modules\path.css doesn't exist
PROJECT_ROOT\node_modules\electron\node_modules\path doesn't exist
PROJECT_ROOT\node_modules\node_modules doesn't exist or is not a directory
looking for modules in PROJECT_ROOT\node_modules
single file module
using description file: PROJECT_ROOT\package.json (relative path: ./node_modules/path)
no extension
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\path doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\path.js doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\path.ts doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\path.jsx doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\path.tsx doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\node_modules\path.css doesn't exist
PROJECT_ROOT\node_modules\path doesn't exist
looking for modules in PROJECT_ROOT\..\node_modules
single file module
No description file found in PROJECT_ROOT\..\node_modules or above
no extension
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\..\node_modules\path doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\..\node_modules\path.js doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\..\node_modules\path.ts doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\..\node_modules\path.jsx doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\..\node_modules\path.tsx doesn't exist
.css
Field 'browser' doesn't contain a valid alias configuration
PROJECT_ROOT\..\node_modules\path.css doesn't exist
PROJECT_ROOT\..\node_modules\path doesn't exist
PROJECT_ROOT\..\..\node_modules doesn't exist or is not a directory
PROJECT_ROOT\..\..\..\node_modules doesn't exist or is not a directory
@ ./src/renderer.ts 30:19-38
group_0 (webpack 5.93.0) compiled with 2 errors and 1 warning in 4169 ms
at PROJECT_ROOT\node_modules\@electron-forge\plugin-webpack\src\WebpackPlugin.ts:528:27
at Hook.eval (eval at create (PROJECT_ROOT\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
at Hook.CALL_DELEGATE [as _call] (PROJECT_ROOT\node_modules\tapable\lib\Hook.js:14:14)
at PROJECT_ROOT\node_modules\webpack\lib\MultiCompiler.js:101:22
at Hook.eval [as callAsync] (eval at create (PROJECT_ROOT\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:29:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (PROJECT_ROOT\node_modules\tapable\lib\Hook.js:18:14)
at Watching._done (PROJECT_ROOT\node_modules\webpack\lib\Watching.js:309:28)
at PROJECT_ROOT\node_modules\webpack\lib\Watching.js:224:21
at Compiler.emitRecords (PROJECT_ROOT\node_modules\webpack\lib\Compiler.js:1048:5)
at PROJECT_ROOT\node_modules\webpack\lib\Watching.js:200:22
at PROJECT_ROOT\node_modules\webpack\lib\Compiler.js:1010:14
at Hook.eval [as callAsync] (eval at create (PROJECT_ROOT\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (PROJECT_ROOT\node_modules\tapable\lib\Hook.js:18:14)
at PROJECT_ROOT\node_modules\webpack\lib\Compiler.js:1007:27
at PROJECT_ROOT\node_modules\neo-async\async.js:2818:7
at done (PROJECT_ROOT\node_modules\neo-async\async.js:3522:9)
So... I think this is a problem of tree-shaking
In previous project I made on electron (from different setup: i.e. erb) I never had problems even exporting both ipcRenderer and ipcMain in the same file (because in the end, renderer is going to import only ipcRenderer and the rest of the code is not going to be included in the build.
But I was guessing that this problem happens because in the electron module there are other exports for the main process that require things like fs or path which is the error that the renderer shows in the end...
To prove it, I just tried creating the classic example to show that tree-shaking works in webpack:
Created a util.ts like:
export function sum(a: number, b: number): number {
return a + b;
}
export function mul(a: number, b: number): number {
return a * b;
}
And added this in renderer.ts:
import { sum } from './util';
console.log(sum(4,5))
It works fine but, when I check the source code in the dev tools... we can see that there's no tree shaking being performed:
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.sum = sum;
exports.mul = mul;
function sum(a, b) {
return a + b;
}
function mul(a, b) {
return a * b;
}
//# sourceURL=[module]
//# sourceMappingURL=data:application/json;charset=utf-8;base64,[shortened]
//# sourceURL=webpack-internal:///./src/util.ts
Technically, tree shaking in webpack only removes dead code on production move... but in development at least it should mark it with /* unused harmony */.
Also, tried adding mode: 'production' to the webpack.renderer.config.ts and code is still not removed...
Might be following the wrong hint but... idk what to try tbh
Also reproducible in Mac:
Installed with:
npm init electron-app@latest electron-react-typescript -- --template=webpack-typescript
npm i -D electron # → issue #3273
ERROR in ./node_modules/electron/index.js 1:11-24
Module not found: Error: Can't resolve 'fs' in 'PROJECT_ROOT/node_modules/electron'
Hey @danikaze,
Out of the box, you would generally want to route your ipcRenderer calls via the preload script: https://www.electronjs.org/docs/latest/tutorial/ipc
In theory, the renderer is able to execute modules available to the renderer, but can't import them directly (it runs as an isolated web app tab).
