remote
remote copied to clipboard
electron
Cannot find module '@electron/remote' using interceptFileProtocol
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.
may be the same issue https://github.com/electron/remote/issues/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 https://github.com/electron/remote/issues/66#issuecomment-1016140530 mentioned.
in package.json move @electron/remote to dependencies, not devDependencies then it works
