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

p4tfgftt 于 2022-12-08 发布在 Electron

关注(0)|答案(2)|浏览(662)

我刚开始从Electron Docs学习电子。我用的是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)

包.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"
  }
}

主要.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();
  }
});

预加载.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]);
  }
});

electron

来源：https://stackoverflow.com/questions/67443778/electronjs-must-use-import-to-load-es-module

2条答案

按热度按时间

km0tfn4u1#

首先，您必须在node_modules中加载esm。
$ npm安装esm --保存
在你的配置中放入下面的配置。这是在我的情况下：

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

将打开窗口的主脚本放在main.mjs中（使用es6风格）。
下面是index.cjs作为启动文件：

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

以及main.mjs中主要部分

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

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

function createWindow() {
  ....
}

在此处签入https://arahutara.wordpress.com/2022/07/13/using-es6-import-in-electron-apps/
希望这能有所帮助。

赞(0）回复(0）举报 2022-12-08

igetnqfo2#

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中说明

赞(0）回复(0）举报 2022-12-08

我来回答

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

2条答案

相关问题

热门标签

最新问答