Electron, react and parcel application

Question

I'm currently trying to compile my electron application into a dist for mac. I am using the boilerplate found here https://github.com/kumarryogeshh/electron-react-parcel-boilerplate

Currently trying to modularise parts of the code, specifically looking at the electron side of things. So the intention is to have the following structure.

- src 
  - components 
  - electron_components 
      window.js 
  electron.js 
  App.js 
  custom.css 
  index.js 

My application is going to have multiple windows, therefore having the windows.js class makes sense, see below:

const electron = require('electron');
const { BrowserWindow } = electron;
const isDev = require("electron-is-dev");

class Window extends BrowserWindow {
  constructor(urldev, urlLive, height, width, resizable = true, parent = null, modal = false) {
    super({
      height: height,
      width: width,
      frame: true,
      resizable: resizable,
      show: true,
      parent: parent,
      modal: modal,
      webPreferences: {
                        //allows application to run in the background
                        backgroundThrottling: true,
                        nodeIntegration: true
                        }
    });
    let promise = this.loadURL(
    isDev
      ? urldev
      : `file://${path.join(__dirname, urlLive)}`
  );
  }
}

module.exports = Window;

The electron.js file is below:

const electron = require("electron");
const app = electron.app;

const path = require("path");
const window = require(path.join(__dirname, './electron_components/window'))

let mainWindow;

function createWindow() {
  mainWindow = new window('http://localhost:3000', "./build/index.html", 800, 600)
  mainWindow.on("closed", () => (mainWindow = null));
}

app.on("ready", createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (mainWindow === null) {
    createWindow();
  }
});

So when I run the application by the command yarn start it runs and works. This is because it is the development environment. However, when I build the dist, by running yarn build it comes up with the following error:

Uncaught Exception:
Error: Cannot find module '/Volumes/electron-react-parcel 1.0.0 1/electron-react-parcel.app/Contents/Resources/app.asar/src/electron_components/window'
Require stack:
- /Volumes/electron-react-parcel 1.0.0 1/electron-react-parcel.app/Contents/Resources/app.asar/src/electron.js
- 
    at Module._resolveFilename (internal/modules/cjs/loader.js:797:17)
    at Function../lib/common/reset-search-paths.ts.Module._resolveFilename (electron/js2c/browser_init.js:7736:16)
    at Module._load (internal/modules/cjs/loader.js:690:27)
    at Module._load (electron/js2c/asar.js:738:28)
    at Function.Module._load (electron/js2c/asar.js:738:28)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/Volumes/electron-react-parcel 1.0.0 1/electron-react-parcel.app/Contents/Resources/app.asar/src/electron.js:5:16)
    at Module._compile (internal/modules/cjs/loader.js:967:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1004:10)

Obviously something is going wrong with the component importation and therefore safe to assume that the import statement for the window class at the top of the electron.js file isn't right. I'm not sure where I'm going wrong but your assistance would be great.

Thanks

Answer 1

So I chose to change to a different boilerplate that used electron forge. Whilst not answering the original question. It rectified my issue.