Electron ipcRenderer import causing error with in webpack project

Question

I am building an Electron Forge music app (with Webpack), and I have the following file structure:

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

I am trying to use ipc (inter-process communication) between index.js and playback.js (in my case, it is to add songs to a queue list), but when I import Electron and ipc in /src/js/index.js and /src/js/playback.js, I get a very long, headache-inducing error message.

My index.js, which is used for the appending of songs from a JSON array to the selection list in the HTML, looks like this:

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;

        ...

My playback.js, which is used for the playback (pause/play, queue, speed, progress bar, etc.) looks like this (it's not in use yet):

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

const queue = []

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

Now, when I run npm start, this works. But, I want to add ipc, and this doesn't have ipc. So, I add the following code to the top of each file:

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

But then, when I run npm start, it seems like it will work...

> [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]
...

But then... I get this nasty pile of error in the console:

...
✖ [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)

I've tried various methods of altering the imports...

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

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

And more...

But no avail. They all produce errors.

What I need is working inter-process communication, passing through main.js using ipcMain (which is not producing errors), between the 2 files, index.js and playback.js.

Does anyone know what's going on here, and how to fix it?

Answer 1

The problem is coming from the 'path' module. This is a nodeJS module that is not available in the browser (renderer). The error explains it very clearly:

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

Answer 2

Errors such as:

Module not found: Error: Can't resolve 'xxx' in 'xxx'

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.

Means that you try to compile Node.js code with webpack and that it is not configured for it (see the target option). In the context of an Electron app, this usually means you require/import something from electron (which uses Node.js APIs), or try to use Node.js APIs in your renderer process.

It's important to know that using Node.js in the renderer process is a security risk.

To solve this, you may be tempted to tweak your webpack configuration, but you should instead consider following security recommendations and use a preload file and IPC to do what you need with Node.js stuff.