Skip to content

Cannot find module '@electron/remote' using interceptFileProtocol #98

Open

Description

@sturla78

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.

Activity

  1. jane-rose commented on Jan 19, 2022

    @jane-rose

    same here

  2. aolyang commented on Jan 20, 2022

    @aolyang

    may be the same issue #66

    require("@electron/remote/main"), may not match the correct package @electron/remote (@electron/remote/main is requireing a path "@electron/remote/main/index.js"), and cause bundle tools not bundle it.

    And main is not export from package "@electron/remote", you can try the way from issue #66 (comment) mentioned.

  3. akbayt commented on Jun 2, 2022

    @akbayt

    same here. Sadly the suggestion didn't work with electron-forge.

  4. bksubhuti commented on Jun 16, 2022

    @bksubhuti

    I used
    npm install and then it worked.

  5. Uwanggood commented on Oct 18, 2022

    @Uwanggood

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions