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

Posted 2023-03-07

【中文标题】ElectronJS：必须使用导入来加载 ES 模块

【英文标题】：ElectronJS: Must use import to load ES Module

【发布时间】：2021-07-30 06:47:56

【问题描述】：

我刚从Electron Docs 开始学习 Electron。我使用 ES6 (import/export)，而他们使用 require。

我在package.json 中添加了type:module，并且我将js 扩展名更改为mjs，但每次我运行npm start（我的节点版本=> 14）时，我都会得到这个错误：

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]);
  
);

【问题讨论】：

没有答案吗？

【参考方案1】：

import 仅在 NodeJS 中用于 ES6 模块 尝试使用以下

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();
  
);

以上推荐并说明在Electron Docs

【讨论】：

对于某些人来说，将 main.mjs 重命名为 main.js 就行了 -> ***.com/a/61061638/14176786