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

Hi, I am using electron 11.4.8 , operating System macos @electron/remote@1.1.0., 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 ?

it happened to me. Any solutions yet?

Try this:

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

@aleksey-hoffman

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

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. 😄

@aolyang

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

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

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

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!

Try this:

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

why is ok ？

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

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"),
    },

@YvanGuidoin

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 🎆

Thanks for the report. This error is by design (the package is renderer-only) and commenters provided working bundling fixes, and the thread has been abandoned since 2022, so we are closing it. Please open a fresh issue if you hit a library bug on a current version.

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

cybertouchllc commented on Aug 20, 2021

aleksey-hoffman commented on Aug 26, 2021

mghazanfar commented on Jan 17, 2022

aolyang commented on Jan 19, 2022

matthiasleitner commented on Jan 22, 2022

HZSamir commented on Jan 31, 2022

maynor96 commented on Feb 2, 2022

aolyang commented on Feb 11, 2022

TengSimon commented on May 17, 2022

akbayt commented on Jun 2, 2022

YvanGuidoin commented on Jun 30, 2022

akbayt commented on Jul 6, 2022

MarshallOfSound commented on Jun 27, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions