"@electron/remote" cannot be required in the browser process. Instead require("@electron/remote/main").

[Skhoshhal]

Hi, I am using electron 11.4.8 , operating System macos @electron/[email protected]., build
electron build work in development mode perfect but with electron-builder it shows me an error which is:
Error: "@electron/remote" cannot be required in the browser process. Instead require("@electron/remote/main").

my index.js will execute in main process.
index.js

const { join } = require("path");
require("@electron/remote/main").initialize(); // this will 

module.exports = {
  init: async () => {
    return {};
  },
  getRendererAppLocation: async () => {
    return `file://${join(__dirname, "..", "index.html")}`;
  },
  preload: async () => {
    console.log("preload path", join(__dirname, "preload.js"));
    // return join(__dirname, "preload.js"); // if i use this line the preload will not execute
    return __non_webpack_require__(join(__dirname, "..", "preload.js")); // if i use this line the preload will execute but with above error.
  },
};

preload.js

console.log("preload is executing");
const {dialog} = require("@electron/remote")
globalThis.dialog = dialog;
console.log("Debug dialog", globalThis.dialog);

in main process i do also require("@electron/remote/main").initialize();

can you please tell me what i do wrong ?

[cybertouchllc]

it happened to me. Any solutions yet?

[aleksey-hoffman]

Try this:

const electron = require('electron')
const electronRemote = process.type === 'browser'
  ? electron
  : require('@electron/remote')

[mghazanfar]

I'm having the same issue. @aleksey-hoffman This did not work for me..

[aolyang]

I have a similar problem that log can not require @electron/remote/main. After deep look the bundle file, found the problem is @electron/remote module didn't bundled into assets file, and mainProcess has no way to find it.

So, my resolution is simple, add @electron/remote to dependencies, add it to electorn-builder build config's extraresources(copy files into dist/node_modules).
then, require("@electron/remote/main") is working fine.

I didn't sure is really can get help, but mention it here for a looking. 😄

[matthiasleitner]

@aolyang having the same issue, how does your extraresources config look like?

[HZSamir]

Same issue.
Edit: Fixed by adding this to my package.json:

    "extraResources": [
      "./node_modules/@electron/remote/**"
    ],

[maynor96]

The error is that require('@electron/remote') must be called in the rendering process and not in the "main" file.

For example, where you create the "BrowserWindow" you should import directly from electron:

import { app, BrowserWindow, Menu, protocol, Tray, nativeImage } from 'electron'

But from the code that is part of the application's views, so to speak, you can access the API as follows:

const remote = require('@electron/remote')

I hope I explained myself as well as possible and that this was helpful.

[aolyang]

@aolyang having the same issue, how does your extraresources config look like?

Yh, like @Unforgiven-wanda did. I made my build script, it has a little difference. But does the same thing.

  // a part of electron-builder config
  extraResources: [
    {
      from: path.join(__dirname, "./node_modules/@electron/remote"),
      to: path.join(__dirname, "./dist/node_modules/@electron/remote")
    }
  ]

In my build, I created a fake package.json for electron:

const pkg = require("../package.json")
const pkgJson = `{
  "name": "app",
  "version": "${pkg.version}",
  "author": "${pkg.author}",
  "main": "./main/index.cjs",
  "dependencies": {
    "@electron/remote": "${pkg.dependencies["@electron/remote"]}"
  },
  "devDependencies": {
    "electron": "${pkg.devDependencies.electron}"
  }
}
`

Before electron-builder build, I have the simple structure like this:

@electron/remoteuse in render Process, but in main Process it does need to run @electron/remote/main/index.js that not been exported.

electron/remote#migrating-from-remote

Main problem is electron only accept cjs format file, and this format(bundle tool behavior) will not auto pick and convert require("foo/bar/not-exported/file").

You can see the difference!

cjs format, main process, file not exported

cjs format preload file, use in renderer, file exported

Mabe someone big can explain the detials. Hopefully helped!

[TengSimon]

Try this:

const electron = require('electron')
const electronRemote = process.type === 'browser'
  ? electron
  : require('@electron/remote')

why is ok ？

[akbayt]

I am using electron-forge and already added the package ("@electron/remote").

Everything works fine when using electron-forge start. However, after electron-forge make I am getting:

Uncaught Exception:
Error: Cannot find module '@electron/remote/main'
Require stack:
- .......\resources\app\dist\main.js
- 
    at Module._resolveFilename (node:internal/modules/cjs/loader:940:15)
    at Function.n._resolveFilename (node:electron/js2c/browser_init:249:1105)
    at Module._load (node:internal/modules/cjs/loader:785:27)
    at Function.c._load (node:electron/js2c/asar_bundle:5:13343)
    at Module.require (node:internal/modules/cjs/loader:1012:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (C:\sup-engine\bytro-electron\out\make\zip\win32\x64\New folder\Call of War-win32-x64-1.16.0\resources\app\dist\main.js:36:31)
    at Module._compile (node:internal/modules/cjs/loader:1116:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1169:10)
    at Module.load (node:internal/modules/cjs/loader:988:32)

[YvanGuidoin]

I am using electron-forge and already added the package ("@electron/remote").

Everything works fine when using electron-forge start. However, after electron-forge make I am getting:

Uncaught Exception:
Error: Cannot find module '@electron/remote/main'
Require stack:
- .......\resources\app\dist\main.js
- 
    at Module._resolveFilename (node:internal/modules/cjs/loader:940:15)
    at Function.n._resolveFilename (node:electron/js2c/browser_init:249:1105)
    at Module._load (node:internal/modules/cjs/loader:785:27)
    at Function.c._load (node:electron/js2c/asar_bundle:5:13343)
    at Module.require (node:internal/modules/cjs/loader:1012:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (C:\sup-engine\bytro-electron\out\make\zip\win32\x64\New folder\Call of War-win32-x64-1.16.0\resources\app\dist\main.js:36:31)
    at Module._compile (node:internal/modules/cjs/loader:1116:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1169:10)
    at Module.load (node:internal/modules/cjs/loader:988:32)

@akbayt if you are using the webpack plugin build, you can use a CopyWebpackPlugin to integrate it into your main, that seems to work fine:

    {
      context: ".",
      from: `node_modules/@electron/remote`,
      to: `../node_modules/@electron/remote`,
      filter: f => !f.endsWith(".d.ts") && !f.includes(".bin"),
    },

[akbayt]

Hi @YvanGuidoin, thanks for the suggestion. However, it turned out that the issue was different. I tried some plugins, but none of them worked. Then, I added the remote package to dependencies instead of devDependencies. This is supposed to be enough but my forge config was implicitly ignoring the node_modules and all src folders. I guess this was the reason why the plugins also couldn't copy the files.

So:

• add '@electron/remote/main' to dependencies (not devDependencies)
• adjust the packageConfig:
  -- remove 'src/' and 'node_modules/'.
  -- add '^/src/*' (to remove main src folder from the build)

    packagerConfig: {
       ....
        ignore: [
            '^/src/*',
            'README.md',
            'LICENSE.md',
            '.git(ignore|keep)',
            '.idea',
            'forge.config.js',
            '(package-lock|tsconfig|tslint).json',
            '.map',
        ],
        prune: true,
        ....
    },

finally make also works 🎆