Electron-vue: Cannot find relative main module using remote in renderer

[Puigcerber]

Describe the issue / bug.

As per the Electron documentation of the remote module: "Modules specified by their relative path will resolve relative to the entrypoint of the main process." But when trying const foo = require('electron').remote.require('./foo'); in the renderer process it throws Error: Cannot find module './foo'. This might be related to the webpack config as discussed in #42.

How can I reproduce this problem?

project/
├── main
│   ├── foo.js
│   └── index.js
└── renderer
    └── main.js

// some relative module: main/foo.js
module.exports = 'bar';

// renderer process: renderer/main.js
import Vue from 'vue';

const foo = require('electron').remote.require('./foo');

Tell me about your development environment.

• Node version: 8.1.2
• NPM version: 5.0.3
• vue-cli version: 2.8.2
• Operating System: macOS Sierra

[SimulatedGREG]

This is expected behavior with the presence of webpack, as it will bundle all main process code (within the dependency tree) into one single file. So the remote.require methods will not work with the initial setup as foo.js will never make it to production.

It might be worth updating the webpack configuration to support this in the future, but for the time being this will be on the back burner.

Related: https://simulatedgreg.gitbooks.io/electron-vue/content/en/file-tree.html

[SimulatedGREG]

Going to close for now, but will keep this in mind. Feel free to comment back any further questions.

[Puigcerber]

Hi @SimulatedGREG!

I was on holidays but just came back and found what I believe to be a good solution by editing the webpack.main.config.js and manually adding every relative module as new entries.

let mainConfig = {
  entry: {
    main: path.join(__dirname, '../src/main/index.js'),
    foo: path.join(__dirname, '../src/main/foo.js')
  },
}

[develar]

I recommend you to not use this approach if you want to enjoy all webpack features, especially HMR. Please see https://medium.com/@develar/electron-very-fast-developer-workflow-with-webpack-hmr-e2a2e23590ad

If you want to transfer data between renderer and main — consider to use IPC. You can see HMR ready IPC in the https://github.com/electron-userland/electrify (will be published as separate module soon).

[develar]

If you want share code between processes — you can simply put code not in the src/main, but in the src.