Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot find module '@electron/remote' using interceptFileProtocol

See original GitHub issue

Hello, i have a strange behavior using @electron/remote with interceptFileProtocol:

main.js

const { app, ipcMain, BrowserWindow, protocol} = require('electron');
const log = require('electron-log');
var win = null; 

//used for initialize object @electron/remote
require('@electron/remote/main').initialize();

//create main window
function createWindow (app) 
{
	//intercept file protocol and change some file content before display  (example)
	protocol.interceptFileProtocol('file', (request, callback) => {
		var file =   __dirname + "\\index.htm";

		log.info('Request.url -> ' + request.url);
		log.info('abs path -> ' + file);
		  
		callback({path: file});      
	});  
  
	const opts = {
		width: 1000,
		height: 650,
		transparent: false,
		useContentSize: true,
		webPreferences: {
		  nodeIntegration: true,
		  contextIsolation: false,
		  enableRemoteModule: true,
		  plugins: true
		}
	};

	var win = new BrowserWindow(opts);
 	require('@electron/remote/main').enable(win.webContents);

	win.loadURL("file:///notexist.htm");
	//win.loadFile("index.htm");
}

//open window
app.on('ready', function(){ createWindow(app) } );

//close all window/process of app
app.on('window-all-closed', () => {
  app.exit();
})

index.htm (render side)

<html>

	<script>
		const remote = require('@electron/remote');
		const { app } = remote;

		var rootPath = `${app.getAppPath()}`;
		
		window.document.onload = function(e){ 
			document.getElementById("PageContainer").innerHTML = rootPath;
		}
		
		window.addEventListener("load", function () {
			document.getElementById("PageContainer").innerHTML = rootPath;
		});
	</script>
<body>


Current application path: 
<div id="PageContainer" style="top:0px;"></div>
</body>
</html>

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "Test",
  "main": "src/main.js",
  "author": "Example",
  "license": "ISC",
  "scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "postinstall": "electron-builder install-app-deps",
  "devDependencies": {
    "electron": "^14.2.1",
    "electron-builder": "^22.10.5"
  },
  "build": {
    "productName": "Test app for load dependencies @electron/remote",
    "appId": "com.test.electronapp",
    "asar": true,
    "asarUnpack": "src/**/*",
    "win": {
      "target": [
        "portable"
      ]
    },
    "files": [
      "src/**/*"
    ],
    "portable": {
      "artifactName": "test.exe"
    }
  },
  "dependencies": {
    "@electron/remote": "^2.0.1",
    "electron-log": "^4.4.1",
    "request": "^2.88.0",
    "yarn": "^1.22.17"
  }
}

If i run the application locally “npm start” all work fine. If i run a packaging script “npm run pack” and move the content of the folder “dist” to another location (the dist folder should be self-consistent) i have the following error from @electron/remote module on render side (open debug tool with ctrl+shift+i):

Uncaught Error: Cannot find module ‘@electron/remote’ Require stack:

notexist.htm at Module._resolveFilename (internal/modules/cjs/loader.js:892) at Function.o._resolveFilename (electron/js2c/renderer_init.js:29) at Module._load (internal/modules/cjs/loader.js:737) at Function.f._load (electron/js2c/asar_bundle.js:5) at Function.o._load (electron/js2c/renderer_init.js:29) at Module.require (internal/modules/cjs/loader.js:964) at require (internal/modules/cjs/helpers.js:88) at notexist.htm:5

The strange thing is that if i use BrowserWindow.loadFile instead of BrowserWindow.loadURL all work file also on dist folder.

What am I doing wrong on this steps ?

Thanks for support.

Issue Analytics

State:
Created 2 years ago
Comments:5

Top GitHub Comments

8reactions

bksubhuticommented, Jun 16, 2022

I used npm install and then it worked.

1reaction

Uwanggoodcommented, Oct 18, 2022

in package.json move @electron/remote to dependencies, not devDependencies then it works

Top Results From Across the Web

electron Cant find module remote in the renderer process

Try with this code const app = require('electron').remote.app. And in your Main process you can do this : const {app, ipcMain, BrowserWindow ...

Breaking Changes | Electron

The remote module is deprecated in Electron 12, and will be removed in Electron 14. It is replaced by the @electron/remote module. //...

All of the Documentation | Electron - GitHub Pages

Build cross platform desktop apps with JavaScript, HTML, and CSS.

How to use interceptFileProtocol function in Protocol - Tabnine

var serveStatic = function () { electron.protocol.interceptFileProtocol('file', function (request, callback) {

All the Electron Docs! | Electron

With Electron apps, however, you can't use the online resources for accessibility audits ... See Chrome's accessibility documentation for more details.