未捕获的 ReferenceError：在 Object.url Electron-React-Typescript 中未定义要求答案

【问题标题】：Uncaught ReferenceError: require is not defined at Object.url Electron-React-Typescrypt未捕获的 ReferenceError：在 Object.url Electron-React-Typescript 中未定义要求
【发布时间】：2021-01-14 04:41:15
【问题描述】：

如何正确使用import语句？

这是我非常基本的电子反应启动器：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    Using node Chrome and Electron
  </body>
</html>

package.json：

{
  "name": "react-ggc",
  "version": "1.0.0",
  "main": "main.js",
  "license": "MIT",
  "devDependencies": {
    "electron": "^10.1.2",
    "typescript": "^4.0.3"
  },
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "react": "^16.13.1"
  }
}

main.js：

const {app, BrowserWindow} = require('electron')
//import { app, BrowserWindow } from 'electron'

async function createWindow () {
  // Create the browser window
  win = new BrowserWindow({width: 800, height: 600})
  // and load the index.html of the app.
  win.loadURL ('http://localhost:3000/')
  win.webContents.openDevTools()
}

app.on('ready', createWindow)

跑纱电子。我一点问题都没有：

(base) marco@pc01:~/webMatters/electronMatters/react-ggc$ yarn electron .
yarn run v1.22.5
$ /home/marco/webMatters/electronMatters/react-ggc/node_modules/.bin/electron .

但是当我添加 "type": "module" 到 package.json 时，根据我阅读的内容，应该表明每个 .js 文件都被视为模块，并在 main.js 中修改导入方式：

package.json：

{
  "type": "module",
  "name": "react-ggc",
  "version": "1.0.0",
  "main": "main.js",
  "license": "MIT",
  "devDependencies": {
    "electron": "^10.1.2",
    "typescript": "^4.0.3"
  },
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "react": "^16.13.1"
  }
}

main.js：

//const {app, BrowserWindow} = require('electron')
import { app, BrowserWindow } from 'electron'

我收到此错误：

(base) marco@pc01:~/webMatters/electronMatters/react-ggc$ yarn electron .
yarn run v1.22.5
$ /home/marco/webMatters/electronMatters/react-ggc/node_modules/.bin/electron .
App threw an error during load
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/marco/webMatters
/electronMatters/react-ggc/main.js
require() of ES modules is not supported.
require() of /home/marco/webMatters/electronMatters/react-ggc/main.js from /home/marco
/webMatters/electronMatters/react-ggc/node_modules/electron/dist/resources/default_app.asar
/main.js is an ES module file as it is a .js file whose nearest parent
package.json contains "type": "module" which defines all .js files in 
that package scope as ES modules.
Instead rename /home/marco/webMatters/electronMatters/react-
ggc/main.js to end in .cjs, change the requiring code to use import(),
or remove "type": "module" from /home/marco/webMatters/electronMatters
/react-ggc/package.json.

at Object.Module._extensions..js (internal/modules
/cjs/loader.js:1162:13)
    at Module.load (internal/modules/cjs/loader.js:981:32)
    at Module._load (internal/modules/cjs/loader.js:881:14)
    at Function.Module._load (electron/js2c/asar.js:769:28)
    at loadApplicationPackage (/home/marco/webMatters/electronMatters
/react-ggc/node_modules/electron/dist/resources/default_app.asar
/main.js:109:16)
    at Object.<anonymous> (/home/marco/webMatters/electronMatters
/react-ggc/node_modules/electron/dist/resources/default_app.asar
/main.js:155:9)
    at Module._compile (internal/modules/cjs/loader.js:1145:30)
    at Object.Module._extensions..js (internal/modules
/cjs/loader.js:1166:10)
    at Module.load (internal/modules/cjs/loader.js:981:32)
    at Module._load (internal/modules/cjs/loader.js:881:14)
A JavaScript error occurred in the main process
Uncaught Exception:
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: 
/home/marco/webMatters/electronMatters/react-ggc/main.js
require() of ES modules is not supported.
require() of /home/marco/webMatters/electronMatters/react-ggc/main.js 
from /home/marco/webMatters/electronMatters/react-ggc/node_modules
/electron/dist/resources/default_app.asar/main.js is an ES module file 
as it is a .js file whose nearest parent package.json contains "type": 
"module" which defines all .js files in that package scope as ES 
modules.
    Instead rename /home/marco/webMatters/electronMatters/react-
ggc/main.js to end in .cjs, 
    change the requiring code to use import(), or remove "type": 
"module" from /home/marco
    /webMatters/electronMatters/react-ggc/package.json.

        at Object.Module._extensions..js (internal/modules
/cjs/loader.js:1162:13)
        at Module.load (internal/modules/cjs/loader.js:981:32)
        at Module._load (internal/modules/cjs/loader.js:881:14)
        at Function.Module._load (electron/js2c/asar.js:769:28)
        at loadApplicationPackage (/home/marco/webMatters
/electronMatters/react-ggc/node_modules
    /electron/dist/resources/default_app.asar/main.js:109:16)
        at Object.<anonymous> (/home/marco/webMatters/electronMatters
/react-ggc/node_modules
    /electron/dist/resources/default_app.asar/main.js:155:9)
        at Module._compile (internal/modules/cjs/loader.js:1145:30)
        at Object.Module._extensions..js (internal/modules
/cjs/loader.js:1166:10)
        at Module.load (internal/modules/cjs/loader.js:981:32)
        at Module._load (internal/modules/cjs/loader.js:881:14)

节点版本：v14.5.0

如何解决问题？

【问题讨论】：

electronjs.org/docs/tutorial/first-app 不使用导入？
@evolutionxbox 如果我想使用 import 而不是 require？
我不认为你可以。 stackoverflow.com/a/39400980/989920
该项目使用 Babel 将导入更改为在电子构建之前需要。他们使用一个名为“gulp”的任务运行器来实现这一点。
最简单的就是npm scripts，但是每个人的友好度都是以用户为基础的。 Gulp 非常适合开始使用。它还有很多插件，并且已经有一段时间了（我在 2013 年使用过）。

标签： javascript node.js reactjs electron

【解决方案1】：

为此，您需要添加webPreferences 来创建窗口。

app.on('ready', () => {
    window = new BrowserWindow({
        width: 900,
        height: 680,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        }
    });
});

【讨论】：