I’m trying to run an old electron app, but I can’t figure out which node version to use, nor which part of the config/dependencies to update.
I added electron webPreferences
in the windows, but it didn’t help.
webPreferences: {
nodeIntegration: true,
nodeIntegrationInWorker: true,
contextIsolation: false,
enableRemoteModule: true,
},
Does someone have any idea of what to check first ? Should I try to fix warnings in the current state of the app or should I update dependencies and then fix major breaks ?
yarn dev
yarn run v1.22.19
$ webpack-dev-server --hot --watch --config webpack.config.dev.js
i 「wds」: Project is running at http://localhost:8080/
i 「wds」: webpack output is served from http://localhost:8080/
i 「atl」: Using [email protected] from typescript
i 「atl」: Using tsconfig.json from ./tsconfig.json
i 「atl」: Using [email protected] from typescript
i 「atl」: Using tsconfig.json from ./tsconfig.json
i 「atl」: Checking started in a separate process...
i 「atl」: Time: 3514ms
i 「atl」: Checking started in a separate process...
i 「atl」: Time: 2355ms
‼ 「wdm」: Hash: 4697290ef706a2a99ad5e1b5fab076995682e95f
Version: webpack 4.30.0
Child
Hash: 4697290ef706a2a99ad5
Time: 17242ms
Built at: 2023-05-24 15:55:15
Asset Size Chunks Chunk Names
bundle.js 6.53 MiB main [emitted] main
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.tsx 52 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/mousetrap/mousetrap.js] 33.1 KiB {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react-redux/es/index.js] 416 bytes {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 8.26 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot sync ^./log$] (webpack)/hot sync nonrecursive ^./log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.61 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[./src/index.tsx] 7.99 KiB {main} [built]
+ 695 hidden modules
WARNING in ./node_modules/fluent-ffmpeg/lib/options/misc.js 27:21-40
Critical dependency: the request of a dependency is an expression
@ ./node_modules/fluent-ffmpeg/lib/fluent-ffmpeg.js
@ ./node_modules/fluent-ffmpeg/index.js
@ ./src/common/Util.js
@ ./src/views/Duplicates.tsx
@ ./src/index.tsx
Child
Hash: e1b5fab076995682e95f
Time: 13857ms
Built at: 2023-05-24 15:55:11
Asset Size Chunks Chunk Names
background.js 4.33 MiB main [emitted] main
Entrypoint main = background.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./background.ts 52 bytes {main} [built]
[./background.ts] 1010 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 8.26 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot sync ^./log$] (webpack)/hot sync nonrecursive ^./log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.61 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.11 KiB {main} [built]
[./src/background/BackgroundWindow.ts] 10.1 KiB {main} [built]
[./src/main/Logger.js] 1010 bytes {main} [built]
[querystring] external "querystring" 42 bytes {main} [built]
+ 586 hidden modules
WARNING in ./node_modules/fluent-ffmpeg/lib/options/misc.js 27:21-40
Critical dependency: the request of a dependency is an expression
@ ./node_modules/fluent-ffmpeg/lib/fluent-ffmpeg.js
@ ./node_modules/fluent-ffmpeg/index.js
@ ./src/background/ScreenshotEngine.ts
@ ./src/background/BackgroundWindow.ts
@ ./background.ts
WARNING in ./node_modules/chokidar/lib/fsevents-handler.js
Module not found: Error: Can't resolve 'fsevents' in '.node_moduleschokidarlib'
@ ./node_modules/chokidar/lib/fsevents-handler.js
@ ./node_modules/chokidar/index.js
@ ./src/background/Watcher.ts
@ ./src/background/BackgroundWindow.ts
@ ./background.ts
i 「wdm」: Compiled with warnings.
Console :
Uncaught ReferenceError: require is not defined
at eval (external_"querystring":1:18)
at Object.querystring (bundle.js:8870:1)
at __webpack_require__ (bundle.js:703:30)
at fn (bundle.js:77:20)
at Object.eval (webpack:///(:8080/webpack)-dev-server/client?:6:19)
at eval (webpack:///(:8080/webpack)-dev-server/client?:299:30)
at ./node_modules/webpack-dev-server/client/index.js?http://localhost:8080 (bundle.js:7798:1)
at __webpack_require__ (bundle.js:703:30)
at fn (bundle.js:77:20)
at eval (webpack:///multi_(:8080/webpack)-dev-server/client?:1:1)
yarn start
yarn run v1.22.19
$ cross-env NODE_ENV=development electron .
process.env.NODE_ENV: development
Done in 72.06s.
Console:
bundle.js:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
.node_moduleselectrondistresourceselectron.asarrenderersecurity-warnings.js:170 Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
Policy set or a policy with "unsafe-eval" enabled. This exposes users of
this app to unnecessary security risks.
For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
Node
$ nvm list
16.10.0
14.21.3
14.17.0
12.4.0
* 10.15.3 (Currently using 64-bit executable)
10.8.0
10.3.0
9.11.2
8.9.4
Edit:
I used node 10.15.3 because that’s the version chatgpt recommended me based on the dependency lists.. and the readme indicates to use node > 8. But I have no clue of which to use, nor which dependency to update in priority.
Should I start with electron, then webpack & typescript ? or maybe the dependency with warnings like fluent-ffmpeg, chokidar & fsevents ?
Also is there any centralized reference for javascript dependency compatibility ? or any tool that would help me identify conflicts & resolve them ?
2
Answers
Electron has its own version of Node.js, so it’s important to use the version specified by Electron.
In your case, based on the log you provided, it seems that you are using Electron with Node.js version
10.15.3
So, you should use Node.js version
10.15.3
for your Electron app.To switch to the correct Node.js version using nvm, you can use the this command:
nvm use 10.15.3
After switching to the correct Node.js version, you can try running your Electron app again:
yarn start
Regarding the warnings and errors you encountered:
I’d update the dependencies to their latest compatible versions. You should review the release notes of each of them to find the compatible versions with each other.
Regarding Content Security Policy (CSP):
You need to define a valid CSP in your main Electron process like this:
Require is not defined:
If you try to use
require
in a renderer process you will get this error becauserequire
is nodejs function and it is only accessible in main process of electron not in the renderer process.If you need to access Node.js modules in the renderer process, you can use the
preload
. This creates a separate script that runs in the main process and allows you to use nodejs modules inside the renderer process.It’s simply like:
Inside of your main process:
In your preload.js file:
querystring is a built-in module for node.js, you need to check your dependency packages, for web consider using query-string instead.