ElectronJS：必须使用导入来加载 ES 模块

Question

I've just started learning Electron from Electron Docs . I used ES6 (import/export) while they used require .

I've added type:module in my package.json and also I've changed the js extension to mjs , but each time I run npm start ( My node version => 14 ), I get this error:

App threw an error during load
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/alaeddine/Desktop/electron-app/petro-book/main.mjs
    at Module.load (internal/modules/cjs/loader.js:933:11)
    at Module._load (internal/modules/cjs/loader.js:776:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12684)
    at loadApplicationPackage (/Users/alaeddine/Desktop/electron-app/petro-book/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:110:16)
    at Object.<anonymous> (/Users/alaeddine/Desktop/electron-app/petro-book/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:222:9)
    at Module._compile (internal/modules/cjs/loader.js:1078:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
    at Module.load (internal/modules/cjs/loader.js:935:32)
    at Module._load (internal/modules/cjs/loader.js:776:14)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12684)

Package.json:

{
  "type": "module",
  "name": "petro-book",
  "version": "0.1.0",
  "author": "Menai Ala Eddine",
  "description": "Desktop application for gas stations",
  "main": "main.mjs",
  "scripts": {
    "start": "electron main.mjs"
  },
  "devDependencies": {
    "electron": "^12.0.7"
  }
}

Main.mjs:

import { app, BrowserWindow } from "electron";
import { join } from "path";

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: join(__dirname, "preload.js"),
    },
  });

  win.loadFile("index.html");
}

app.whenReady().then(() => {
  createWindow();

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

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

preload.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]);
  }
});

Answer 1

First you have to load esm in your node_modules.

$ npm install esm --save

Put below config in your configuration. This is in my case:

  "main": "src/index.cjs",
  "module" : "src/main.mjs",
  "type": "module",

Put Your main script to open window in main.mjs (using es6 style).

here is index.cjs as startup:

require = require("esm")(module/* , options */)
module.exports = require("./main.mjs")

and our main part in main.mjs

import electron from 'electron';
import path from 'path';

const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

function createWindow() {
  ....
}

Check in here https://arahutara.wordpress.com/2022/07/13/using-es6-import-in-electron-apps/

Hopes this will help.

Answer 2

import is used for ES6 Modules only in NodeJS Try using the following

const { app, BrowserWindow } = require("electron");
const join = require("path").join;

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: join(__dirname, "preload.js"),
    },
  });

  win.loadFile("index.html");
}

app.whenReady().then(() => {
  createWindow();

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

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

The above is recommended and illustrated in the Electron Docs