electron/remote

Cannot find module '@electron/remote' using interceptFileProtocol

sturla78 opened this issue · 5 comments

sturla78 commented

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.

jane-rose commented

same here

aolyang commented

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.

akbayt commented

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

bksubhuti commented

I used
npm install and then it worked.

  • 👍2
  • 👎2
  • 🎉1
  • 😕6
Uwanggood commented

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

  • 👍5