Cannot find module electron.js in app.asar

I am trying to package my react app with electron (first time). Everything was fine when running the development build. I packaged it and it created the dist file with no errors logged.

However, when I tried opening the app.exe file just to make sure everything was ok, I got this error:

Cannot find module C:\Users\user\Desktop\app\dist\win-unpacked\resources\app.asar\...\electron.js

I do not have a electron.js file anywhere in my app, not even mentioned (I have checked). For the electron packaging I only created a main.js and a preload.js just like the website guides to (and updated the package.json file). So the error does not come directly from my code, I believe.

Everything is up to date as well (node, npm, electron and electron-builder).

Anyone has any ideas how I can troubleshoot/solve this error?

main.js

const { app, BrowserWindow } = require("electron");
const path = require("node:path");

function createWindow() {
  const win = new BrowserWindow({
    width: 580,
    height: 580,
    webPreferences: {
      preload: path.join(app.getAppPath(), "preload.js"),
    },
  });

  win.loadFile(path.join(__dirname, "build", "index.html"));
}

app.whenReady().then(createWindow);

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

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

preaload.js

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

package.json adjustments

{

 (...)

 "main": "main.js",

 (...)

 "scripts": {

    (...)

    "electron": "electron .",
    "dev": "concurrently \"npm run start\" \"npm run electron\"",
    "package": "electron-builder"
  }

  (...)

  "build": {
    "appId": "com.name.app",
    "files": [
      "build/**/*",
      "preload.js",
      "main.js"
    ],
    "win": {
      "target": [
        "nsis"
      ],
      "publisherName": "name"
    }
  },
  "devDependencies": {
    "electron-builder": "^25.0.5"
  }
}

I haven't done anything yet to try and solve it as I have no idea where it comes from.

You get this error because your created your app with CRA and Electron-builder has a built-in preset for it, which it will apply by default when detecting react-scripts:

extends?

optional extends: null | string | string[]

The name of a built-in configuration preset (currently, only react-cra is supported) or any number of paths to config files (relative to project dir).

The latter allows to mixin a config from multiple other configs, as if you Object.assign them, but properly combine files glob patterns.

If react-scripts in the app dependencies, react-cra will be set automatically. Set to null to disable automatic detection.

This preset expects your entry file to be named electron.js and to be in the build folder when packaging.

You can either decide to respect the expected file structure, or you can disable the preset using the extends option on your configuration:

"build": {
  "extends": null,
  // ...
}

For the record, when the preset is detected and you don't have the expected files, usually the packaging step fails with the following error:

Application entry file "build/electron.js" in the "xxx" does not exist. Seems like a wrong configuration.

I'm not sure why yours passed.