javascript - electron webpack Okontrollerat ReferenceError: require är inte definierad "querystring"
Jag försöker köra en gammal Electron-app, men jag kan inte lista ut vilken version av Node jag ska använda, eller vilken del av konfigurationen/beroenden jag ska uppdatera.
Jag lade till electron webPreferences i fönstren, men det hjälpte inte.
webPreferences: {
nodeIntegration: true,
nodeIntegrationInWorker: true,
contextIsolation: false,
enableRemoteModule: true,
},
Har någon någon idé om vad man ska kolla först? Ska jag försöka fixa varningar i appens nuvarande tillstånd eller ska jag uppdatera beroenden och sedan åtgärda större fel?
garn 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 from typescript
i ｢atl｣: Using tsconfig.json from ./tsconfig.json
i ｢atl｣: Using [email 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_modules\chokidar\lib'
@ ./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.
Konsol :
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)
garn start
yarn run v1.22.19
cross-env NODE_ENV=development electron .
process.env.NODE_ENV: development
Done in 72.06s.
Konsol :
bundle.js:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
.\node_modules\electron\dist\resources\electron.asar\renderer\security-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.
Nod
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
Redigera:
Jag använde node 10.15.3 eftersom det är den versionen chatgpt rekommenderade mig baserat på beroendelistorna.. och readme:n indikerar att man ska använda nod > 8. Men jag har ingen aning om vilken jag ska använda, eller vilken prioritet jag ska uppdatera. Ska jag börja med Electron, sedan webpack och typescript? Eller kanske beroendet med varningar som fluent-ffmpeg, chokidar och fsevents?
Finns det också någon centraliserad referens för JavaScript-beroende kompatibilitet? Eller något verktyg som kan hjälpa mig att identifiera konflikter och lösa dem?
Redigera 2:
Jag kan inte få node-versionen från renderer.js med Electron 5 och Node 12.18 och exemplet är för Electron 24.
yarn dev (konsol)
renderer.js:2 Uncaught ReferenceError: versions is not defined
yarn start (konsol)
.\node_modules\electron\dist\resources\electron.asar\renderer\init.js:177 Unable to load preload script: .\preload.js
(anonymous) @ .\node_modules\electron\dist\resources\electron.asar\renderer\init.js:177
.\node_modules\electron\dist\resources\electron.asar\renderer\init.js:178 TypeError: Cannot read property 'exposeInMainWorld' of undefined
(anonymous) @ .\node_modules\electron\dist\resources\electron.asar\renderer\init.js:178
renderer.js:2 Uncaught ReferenceError: versions is not defined
at renderer.js:2
Redigera 3:
Jag har gjort vissa "framsteg". Efter att ha uppdaterat Electron till v6 fick jag följande fel: Error: contextBridge API kan endast användas när contextIsolation är aktiverat
Jag försökte återaktivera kontextisolering i Windows: contextIsolation: true, och sedan fick jag (nästan) det resultat jag letade efter: Den här appen använder Chrome (v76.0.3809.146), Node.js (v12.4.0) och Electron (v6.1.12). Fast jag använder Node v12.18 som Electron release-dokumentationen rekommenderar.
Sedan försökte jag ladda app-paketet igen i index.html, med referens till:
./dist/bundle.jshttp://localhost:8080/bundle.js
Men jag får fortfarande samma fel :
yarn start : bundle.js:1 Kunde inte ladda resurs: net::ERR_CONNECTION_REFUSED
yarn dev : Ohanterat ReferenceError: require är inte definierad
Är det för att jag behöver flytta och exponera alla IpcHandlers och alla filer under src/common/ i preload.js-filen med contextBridge och ipcRenderer som:
contextBridge.exposeInMainWorld('Constants', {
IpcEvents: () => ipcRenderer.invoke('IpcEvents'),
ping: () => ipcRenderer.invoke('ping')
})
Eller är det ett helt annat problem som någon saknad sökväg eller ett problem relaterat till webpack-konfigurationen?
Jag testade att lägga till en ping-hanterare i main.js men då får jag ett fel ipcMain.handle är inte en funktion Jag har läst om IPC-mönstren men det är mycket att förstå fullt ut på en gång, särskilt med hur det har gjorts i appen..
Dessutom kräver electron v6 som använder require() för Node-byggda moduler i sandlådeförendare inte längre implicit den fjärrversionen. Bör jag ersätta alla require med require('electron').remote.require i js- och ts/x-filer? Eller bara på klientsidan?
Svar #1
Låt oss gå punkt för punkt:
Jag kan inte lista ut vilken version av Node jag ska använda, eller vilken del av konfigurationen/beroendena som ska uppdateras.
Du använder Electron 4 som innehåller Node v10.11, så du kan använda Node 10 under tiden.
Om du vill uppgradera till den elektronversion som för närvarande stöds (vilket du bör), ta en titt på release-tabellen. Att uppgradera till den senaste skulle också kräva att du använder den senaste LTS Node (18 vid skrivande stund) och dina nästa steg bör leda till Breaking Changes så att du kan anpassa dig till de relevanta och gå vidare därifrån.
En av de relevanta för dig är att sedan Electron 5 är det starkt avrått att använda Node-API:er eller kommunicera med huvudprocessen direkt i rendererprocessen, och man bör istället använda contextBridge.
Det kräver naturligtvis en stor omstrukturering i din kodbas, så du kan för tillfället faktiskt få det att fungera via:
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
som exponerar Node-API:er till renderer-processen och inte separerar det från huvudkontexten.
yarn dev & Ohanterat ReferenceError: require är inte definierad
Eftersom din klientkod kraftigt använder både Electron och Node API:er, kan den inte köras i webbläsaren, vilket är fallet när du använder yarn dev och sedan går till localhost:8080. Webbläsaren har inte åtkomst till Node API:er som require() och kastar därför felet ovan.
Det är därför det fungerar (någorlunda) bra att köra yarn start, eftersom det startar Electron, som tack vare konfigurationen ovan exponerar Node-API:erna för renderaren (klientsidan).
Om du utför refaktoreringen och använder contextBridge, det vill säga rensar din klientkod från alla Electron- och Node-referenser, kommer du vara i bästa form för att köra klientkoden i webbläsaren (med viss API-mockning).
Ska jag börja med Electron, sedan Webpack och TypeScript? Eller kanske beroenden med varningar som fluent-ffmpeg, chokidar och fsevents?
Jag skulle ignorera varningen, för chansen är stor att de bara försvinner när du uppgraderar elektronen.
Att uppgradera TypeScript är faktiskt upp till dig, om du vill dra nytta av de nya funktioner det erbjuder, och det är helt frivilligt.
Du behöver inte heller uppgradera Webpack (du har version 3 just nu - gammal men fungerar) men du kan tycka det är lättare längre fram att använda något mer modernt, antingen en högre version eller något snabbare som Vite, men det är inget krav.
Finns det också någon centraliserad referens för kompatibilitet med javascript-beroende?
Endast som specificerat av bibliotekets författare, vilket kontrolleras av paketförvaltare som NPM vid installationstillfället.
Svar #2
querystring är en inbyggd modul för node.js, du behöver kolla dina beroendepaket, för webben överväg att använda query-string istället.