remote.require local typescript module

[toriphes]

Describe the bug
I do not know if it's a bug related to vue-electron-builder. I need to make some stuff available from the main process to the renderer process so I'm using the remote.require electron api like below:

// ./src/electron-app/remote.ts
import { remote } from "electron";
export const fs = remote.require("fs");

// in the vue app file
import fs from '@/electron-app/remote'
// do some stuff in the renderer process with the node fs module

Everything works fine but if I try to import a module created by me in the same directory I get the error Uncaught Error: Can not find module './myModule'

// ./src/electron-app/remote.ts
import { remote } from "electron";
export const myModule = remote.require("./myModule"); // got error here
// Uncaught Error: Can not find module './myModule'

Note: for my project I had to change the directory of themainProcessFile in ./src/electron-app/main.ts

To Reproduce
Se the description above or run this repository:
https://github.com/toriphes/vue-electron-builder-remote-issue

Expected behavior
I expect to be able to import local modules with remote electron exactly as in this example (already existing electron app):
https://github.com/sqlectron/sqlectron-gui/blob/master/src/browser/remote.js

Environment:

• OS and version: MacOS Mojave 10.14.1
• Node version: 10.9.0
• npm version: 6.4.1
• vue-cli-plugin-electron-builder version : 1.0.0-rc.7
• custom config for vcp-electron-builder:

// vue.config.js
module.exports = {
  transpileDependencies: ["vuex-module-decorators"],
  pluginOptions: {
    electronBuilder: {
      mainProcessFile: "src/electron-app/main.ts",
      builderOptions: {
        mac: {
          icon: "./icon.icns"
        }
      }
    }
  }
};

[nklayman]

try just importing it normally, instead of remote.require.

[nklayman]

Webpack won't copy over files unless they are imported. Therefore, this file won't be included in the final build.

[toriphes]

Thanks for the quick answer.
I tried as you suggested importing the module normally and then via remote.require api:

// ./src/electron-app/remote.ts
import { remote } from "electron";
import MyModule from "./myModule";

export const myMod: MyModule = remote.require("./myModule");
// Uncaught Error: Can not find module './myModule'

The error persists.
For scruple I tried to import the module also in the render process with no success.

// in the vue app file
import MyModule from "./myModule";
import { myMod } from '@/electron-app/remote'

Maybe remote module can not resolve the local path because it use a different resolver outside webpack.

[toriphes]

I've just created a repository to show the problem.
https://github.com/toriphes/vue-electron-builder-remote-issue

[nklayman]

You can use fs directly in the render process btw.

[toriphes]

Yes I can, bu my purpose was to create some custom logic on the main process to be reused in the renderer process.

I think this is not possible with webpack right now unless you change the configuration by adding an entry for each custom module (losing the live reloads feature).

Currently the only solution is to implement my logic using ipc.

[nklayman]

I think IPC channels are your best option over having multiple entries. Should this issue be closed now?

[toriphes]

I think so too, you can close this issue

[thoni56]

I've googled until I'm blue... This is the closest I've gotten to my issue, but I'm not sure if I understand the gist of this.

If I need to use the remote-feature of electron inside a vue-cli-electron-builder project I can't do that because webpack does not bundle my module unless it is imported using an actual import statement (i.e. not using remote.require())?

And I can't force webpack to include it without losing the HRL?

If so, it seems this package is preventing use of an essential electron functionality. And since it seems like electron is getting more adamant about the separation of main and renderer this is getting more essential, right?

[nklayman]

If you need to remote.require, you can place a js file in the public folder, it will be copied into your main app.

[thoni56]

I'm not sure I understand. I'm thinking you don't mean to put the "required" module there, but a .js which includes only the required line with "require('')", right?

Like

const main = require('./main')

I can't get this to work, it still doesn't allow my renderer to resolve remote.require('./main').

Is there a path issue here? In the public folder the path to main is ../main, should that be used? Is the relative path between the renderer module and main of any consequence?

[thoni56]

This describes how paths for electron remote works.

[nklayman]

@thoni56 are you trying to require your background.js from the renderer process? This is not recommended by electron, you should use IPC channels instead.

[thoni56]

@nklayman Well that depends. I know you can't directly js-require them, but according to this, which is as "recommended by electron" as you can get:

The remote module provides a simple way to do inter-process communication (IPC) between the renderer process (web page) and the main process.

(I only needed a single function there, which of course could have been factored out of background.js.)

But anyways, since the problem seems to be that webpack doesn't package remote.required() files, I solved it by placing a .js file in the public folder like you suggested above, and solve the path issue I had by reading what I referenced in my post about paths above.

Thanks for you help!

[nklayman]

Glad that you figured it out!

[lmmfranco]

@thoni56 How exactly did you reference the js in public folder from the vue app? I spent a lot of time on this and still couldn't figure it out.

[nklayman]

See the docs on static assets. Use path.join(__static, 'myFile.js'). __static points to the public dir in production and development.