Electron ipcRenderer 导入导致 webpack 项目中出现错误

问题描述 投票：0回答：1

我正在构建一个 Electron Forge 音乐应用程序（使用 Webpack），并且我有以下文件结构：

Music/
├─ node_modules/
├─ out/
├─ src/
│  ├─ assets/
│  │  ├─ icons/
│  │  │  ├─ appicon.ico
│  │  │  ├─ appicon.png
│  ├─ images/
│  │  ├─ covers/
│  │  │  ├─ believer_imagine-dragons.png
│  │  │  ├─ stressed-out_twenty-one-pilots.png
│  │  ├─ music-note.png
│  ├─ js/
│  │  ├─ index.js
│  │  ├─ playback.js
│  ├─ scripts/
│  ├─ scss/
│  │  ├─ _playBar.scss
│  │  ├─ _search.scss
│  │  ├─ _style.scss
│  │  ├─ app.scss
│  ├─ index.html
│  ├─ main.js
│  ├─ preload.js
│  ├─ renderer.js
├─ .gitignore
├─ forge.config.js
├─ package-lock.json
├─ package.json
├─ webpack.renderer.config.js
├─ webpack.main.config.js
├─ webpack.rules.js
├─ yarn.lock

我试图在index.js和playback.js之间使用ipc（进程间通信）（在我的例子中，是将歌曲添加到队列列表中），但是当我在

/src/js/index.js
和
中导入Electron和ipc时/src/js/playback.js
，我收到一条很长、令人头痛的错误消息。

My 

index.js
，用于将 JSON 数组中的歌曲附加到 HTML 中的选择列表，如下所示：

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

const songs = [
    {
        name: "Believer",
        artist: "Imagine Dragons",
        image: "believer_imagine-dragons",
        audio: "",
        id: "believer_1"
    },
    {
        name: "Stressed Out",
        artist: "twenty-one pilots",
        image: "stressed-out_twenty-one-pilots",
        audio: "",
        id: "stressed-out_1"
    }
]

function appendForYou() {
    if (songs != '') {
    document.getElementById('foryou').innerText = '';
}
songs.forEach((song) => {
        let songCont;
        let name;
        let artist;
        let img;
        let addQueue;
        let addQueuePlus;

        songCont = document.createElement('div');
        songCont.classList.add('m-item');
        songCont.classList.add('p-hov');
        songCont.id = song.id;

        ...

我的

playback.js
，用于播放（暂停/播放，队列，速度，进度条等）看起来像这样（尚未使用）：

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

const queue = []

let track_index = 0;
let isPlaying = false;
let updateTimer;
 
let curr_track = document.createElement('audio');

现在，当我运行 

npm start
时，这有效。但是，我想添加ipc，而这个没有ipc。因此，我将以下代码添加到每个文件的顶部：

import electron from 'electron';
import path from 'path';
const ipc = electron.ipcRenderer;

但是，当我运行

npm start
时，它似乎会起作用......

> [email protected] start
> electron-forge start

✔ Checking your system
✔ Locating application
✔ Loading configuration
✔ Preparing native dependencies [1s]
✔ Running generateAssets hook
✔ [plugin-webpack] Compiling main process code [0.8s]
...

但是……我在控制台中收到了一堆令人讨厌的错误：

...
✖ [plugin-webpack] Launching dev servers for renderer process code
  › Compilation errors in the preload: group_0:
    assets by path covers/*.png 107 KiB
      asset covers/believer_imagine-dragons.png 82.3 KiB [emitted] [from: src/images/covers/believer_imagine-dragons.png] [copied…

An unhandled rejection has occurred inside Forge:
Error: Compilation errors in the preload: group_0:
  assets by path covers/*.png 107 KiB
    asset covers/believer_imagine-dragons.png 82.3 KiB [emitted] [from: src/images/covers/believer_imagine-dragons.png] [copied]
    asset covers/stressed-out_twenty-one-pilots.png 24.6 KiB [emitted] [from: src/images/covers/stressed-out_twenty-one-pilots.png] [copied]
  asset main_window/preload.js 561 KiB [emitted] (name: main_window)
  asset music-note.png 2.76 KiB [emitted] [from: src/images/music-note.png] [copied]
  runtime modules 26.4 KiB 12 modules
  modules by path ./node_modules/ 160 KiB
    modules by path ./node_modules/@electron-forge/plugin-webpack/node_modules/ 77 KiB
      modules by path ./node_modules/@electron-forge/plugin-webpack/node_modules/webpack-dev-...(truncated) 71.8 KiB 16 modules
      modules by path ./node_modules/@electron-forge/plugin-webpack/node_modules/webpack/hot/*.js 5.18 KiB
        ./node_modules/@electron-forge/plugin-webpack/node_modules/webpack/hot...(truncated) 1.94 KiB [built] [code generated]
        + 3 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.js 157 bytes [built] [code generated]
  external "events" 42 bytes [built] [code generated]
  group_0 (webpack 5.90.3) compiled successfully in 3586 ms

group_0:
  assets by path native_modules/dist/locales/*.pak 37.1 MiB 55 assets
  assets by path native_modules/dist/*.dll 21.2 MiB 6 assets
  assets by path native_modules/dist/*.pak 5.4 MiB
    asset native_modules/dist/resources.pak 5.03 MiB [emitted] (auxiliary name: main_window)
    + 2 assets
  assets by status 110 KiB [compared for emit]
    asset covers/believer_imagine-dragons.png 82.3 KiB [compared for emit] [from: src/images/covers/believer_imagine-dragons.png] [copied]
    + 2 assets
  assets by path main_window/ 5.1 MiB
    asset main_window/index.js 5.1 MiB [emitted] (name: main_window)
    asset main_window/index.html 3.57 KiB [emitted]
  assets by path native_modules/dist/*.bin 962 KiB
    asset native_modules/dist/v8_context_snapshot.bin 663 KiB [emitted] (auxiliary name: main_window)
    asset native_modules/dist/snapshot_blob.bin 299 KiB [emitted] (auxiliary name: main_window)
  + 8 assets
  runtime modules 26.5 KiB 13 modules
  modules by path ./node_modules/ 1.96 MiB
    modules by path ./node_modules/@electron-forge/plugin-webpack/node_modules/ 77 KiB 20 modules
    modules by path ./node_modules/style-loader/dist/runtime/*.js 5.84 KiB 6 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
    + 5 modules
  modules by path ./src/ 23.6 KiB
    modules by path ./src/scss/*.scss 16.9 KiB 2 modules
    modules by path ./src/js/*.js 5.65 KiB
      ./src/js/index.js 5.38 KiB [built] [code generated]
      ./src/js/playback.js 273 bytes [built] [code generated]
    ./src/renderer.js 1.07 KiB [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:
   * "C:/Users/myuser/Desktop/Music/Music/node_modules/electron/dist/LICENSE"
   * "C:/Users/myuser/Desktop/Music/Music/node_modules/electron/dist/LICENSES.chromium.html"
   * "C:/Users/myuser/Desktop/Music/Music/node_modules/electron/dist/chrome_100_percent.pak"
   * and more ...
   @ ./src/js/playback.js 1:0-32 3:10-30
   @ ./src/renderer.js 32:0-26

  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 'C:\Users\myuser\Desktop\Music\Music\node_modules\electron'
   @ ./src/js/playback.js 1:0-32 3:10-30
   @ ./src/renderer.js 32:0-26

  ERROR in ./node_modules/electron/index.js 2:13-28
  Module not found: Error: Can't resolve 'path' in 'C:\Users\myuser\Desktop\Music\Music\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 }
   @ ./src/js/playback.js 1:0-32 3:10-30
   @ ./src/renderer.js 32:0-26

  ERROR in ./src/js/index.js 2:0-24
  Module not found: Error: Can't resolve 'path' in 'C:\Users\myuser\Desktop\Music\Music\src\js'

  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 }
   @ ./src/renderer.js 31:0-23

  ERROR in ./src/js/playback.js 2:0-24
  Module not found: Error: Can't resolve 'path' in 'C:\Users\myuser\Desktop\Music\Music\src\js'

  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 }
   @ ./src/renderer.js 32:0-26

  4 errors have detailed information that is not shown.
  Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

  group_0 (webpack 5.90.3) compiled with 4 errors and 1 warning in 5138 ms
at C:\Users\myuser\Desktop\Music\Music\node_modules\@electron-forge\plugin-webpack\dist\WebpackPlugin.js:224:43
    at Hook.eval [as call] (eval at create (C:\Users\myuser\Desktop\Music\Music\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
    at Hook.CALL_DELEGATE [as _call] (C:\Users\myuser\Desktop\Music\Music\node_modules\tapable\lib\Hook.js:14:14)
    at C:\Users\myuser\Desktop\Music\Music\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\MultiCompiler.js:98:22
    at Hook.eval [as callAsync] (eval at create (C:\Users\myuser\Desktop\Music\Music\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:18:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\myuser\Desktop\Music\Music\node_modules\tapable\lib\Hook.js:18:14)
    at Watching._done (C:\Users\myuser\Desktop\Music\Music\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\Watching.js:299:28)
    at C:\Users\myuser\Desktop\Music\Music\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\Watching.js:213:21
    at Compiler.emitRecords (C:\Users\myuser\Desktop\Music\Music\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\Compiler.js:932:5)
    at C:\Users\myuser\Desktop\Music\Music\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\Watching.js:191:22
    at C:\Users\myuser\Desktop\Music\Music\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\Compiler.js:898:14
    at Hook.eval [as callAsync] (eval at create (C:\Users\myuser\Desktop\Music\Music\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\myuser\Desktop\Music\Music\node_modules\tapable\lib\Hook.js:18:14)
    at C:\Users\myuser\Desktop\Music\Music\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\Compiler.js:895:27
    at C:\Users\myuser\Desktop\Music\Music\node_modules\neo-async\async.js:2818:7
    at done (C:\Users\myuser\Desktop\Music\Music\node_modules\neo-async\async.js:3522:9)
    at eval (eval at create (C:\Users\myuser\Desktop\Music\Music\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:11:1)
    at C:\Users\myuser\Desktop\Music\Music\node_modules\@electron-forge\plugin-webpack\node_modules\webpack-dev-middleware\dist\utils\setupWriteToDisk.js:101:20
    at C:\Users\myuser\Desktop\Music\Music\node_modules\graceful-fs\graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:189:23)

我尝试了各种改变导入的方法......

const electron = require('electron')
const path = require('path')
const ipc = electron.ipcRenderer;

const { electron, ipcRenderer } = require('electron')
const path = require('path')

还有更多...

但是没有用。它们都会产生错误。

我需要的是在两个文件

index.js
和
playback.js
之间进行进程间通信，使用ipcMain（不会产生错误）通过main.js。

有谁知道这是怎么回事以及如何解决它？

node.js webpack electron ipc electron-forge
1个回答
0
投票

问题来自“路径”模块。这是一个在浏览器（渲染器）中不可用的nodeJS模块。错误解释得很清楚：

ERROR in ./src/js/playback.js 2:0-24
  Module not found: Error: Can't resolve 'path' in 'C:\Users\myuser\Desktop\Music\Music\src\js'

  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 }
   @ ./src/renderer.js 32:0-26
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.