Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Skhoshhal opened this issue Jun 15, 2021 · 12 comments

Comments

@Skhoshhal
Copy link

Skhoshhal commented Jun 15, 2021

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
Copy link

it happened to me. Any solutions yet?

@aleksey-hoffman
Copy link

Try this:

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

@mghazanfar
Copy link

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

@aolyang
Copy link

aolyang commented Jan 19, 2022

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
Copy link

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

@HZSamir
Copy link

HZSamir commented Jan 31, 2022

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

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

@maynor96
Copy link

maynor96 commented Feb 2, 2022

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
Copy link

aolyang commented Feb 11, 2022

@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:

image

@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

image

cjs format preload file, use in renderer, file exported
image

Mabe someone big can explain the detials. Hopefully helped!

@TengSimon
Copy link

Try this:

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

why is ok ?

@akbayt
Copy link

akbayt commented Jun 2, 2022

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
Copy link

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
Copy link

akbayt commented Jul 6, 2022

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 🎆

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests