Cannot find module '@electron/remote' using interceptFileProtocol

sturla78 commented 2 years ago

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 2 years ago

same here

aolyang commented 2 years ago

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.

akbayt commented 2 years ago

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

bksubhuti commented 2 years ago

I used npm install and then it worked.

Uwanggood commented 2 years ago

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

electron / remote

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