React / JS Uncaught ReferenceError：未定义要求答案

【问题标题】：React/JS Uncaught ReferenceError: require is not definedReact / JS Uncaught ReferenceError：未定义要求
【发布时间】：2021-03-12 09:06:49
【问题描述】：

我刚开始学习 JS/react，我从一个 html 文件中收到一个错误，抱怨为“未捕获的 ReferenceError：未定义要求”。请参阅下面的示例。

错误来自第 8 行

    const electron = require('electron');

来自以下代码

this is addWindow.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Add shopping list item</title>
</head>
<body>
  <script>
    const electron = require('electron');
    const {ipcRenderer} = electron;

    const form = document.querySelector('form');
    form.addEventListener('submit', submitForm);

    function submitForm(){
      e.preventDefault();
    }
  </script>
  <form> 
    <div>
      <label>Enter Item</label>
      <input type="text" id="item" autofocus>
    </div>
    <button type="submit">add item</button>
  </form>

</body>
</html>

我已经研究并注意到很多其他人都有这个问题，所以我添加了

  nodeIntegration: true,

this is main.js
const electron = require("electron");
const url = require("url");
const path = require("path");

const { app, BrowserWindow, Menu } = electron;

let mainWindow;
let addWindow;

//listen
app.on("ready", function () {
  //create new window
  mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
      preload: `${__dirname}/preload.js`,
    },
  });

  //
  mainWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, "mainWindow.html"),
      protocol: "file:",
      slashes: true,
    })
  );
  //Quit app when closed
  mainWindow.on("closed", function () {
    app.quit();
  });

  //build menu from template
  const mainMenu = Menu.buildFromTemplate(mainMenuTemplate);
  //insert menu
  Menu.setApplicationMenu(mainMenu);
});

//handle add window
function createAddWindow() {
  //create new window
  addWindow = new BrowserWindow({
    width: 300,
    height: 200,
    title: "Add shopping list item",
    webPreferences: {
      nodeIntegration: true,
      preload: `${__dirname}/preload.js`,
    },
  });

  //
  addWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, "addWindow.html"),
      protocol: "file:",
      slashes: true,
    })
  );

  //garbage collection
  addWindow.on("close", function () {
    addWindow = null;
  });
}

//add clear quit

//create menu template
const mainMenuTemplate = [
  {
    label: "la",
  },
  {
    label: "File",
    submenu: [
      {
        label: "Add Item",
        accelerator: process.platform == "darwin" ? "Command+A" : "Ctrl+A", //mac for darwin
        click() {
          createAddWindow();
        },
      },
      {
        label: "Clear Item",
      },
      {
        label: "Quit",
        accelerator: process.platform == "darwin" ? "Command+Q" : "Ctrl+Q", //mac for darwin
        click() {
          app.quit(); //control Q
        },
      },
    ],
  },
];

if (process.platform == "darwin") {
  // mainMenuTemplate.unshift({});
}

// add dev tool item if not in prod
if (process.env.NODE_ENV !== "production") {
  mainMenuTemplate.push({
    label: "Developer Tools",
    submenu: [
      {
        label: "Toggle DevTools",
        accelerator: process.platform == "darwin" ? "Command+I" : "Ctrl+I",
        click(item, focusedWindow) {
          focusedWindow.toggleDevTools();
        },
      },
      {
        role: "reload",
      },
    ],
  });
}

但我仍然没有运气。你能帮帮我吗？

谢谢。

【问题讨论】：

在部署项目之前，您是否使用过babel 进行过编译？
浏览器不能直接使用代码。这在编写反应代码时很典型。您必须使用构建过程来生成 Web 浏览器中的 javascript 引擎可以使用的包。如果你正在学习 React，你应该使用 https://create-react-app.dev/ 或包含构建工具（webpack、babel 等）的类似库。
特别是您的错误消息告诉您require() 在网络浏览器中不存在。 require() 可以在服务器上的 node.js 上运行的 javascript 中使用。在客户端代码中（在浏览器中运行，这是您想要的），您必须使用构建工具（例如 babel 和/或 webpack）将代码转换为可以在浏览器中运行的东西。您的小代码将与需求一起捆绑到一个包含反应运行时和您的应用程序代码的大 javascript 文件中。
@Navand 我在可视代码上安装了 babel
@HåkenLid 我确实调用了“create-react-app shopping_list”并将所有文件移植到新的 shopping_list 中，但我仍然看到相同的错误:(我不确定如何将它们捆绑在一起。

标签： javascript html reactjs uncaught-exception

【解决方案1】：

你试过这个解决方案吗？：

const ipcRenderer = window.require("electron").ipcRenderer;

原文链接：https://github.com/electron/electron/issues/7300#issuecomment-671846484

【讨论】：

【解决方案2】：

我认为您的代码需要先进行反编译，这是我的 node.js 项目的 package.json 的脚本部分，可能对您有用：

"scripts": {
    "build": "rm -rf dist && babel ./ -d dist --ignore 'node_modules'",
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon --exec babel-node src/index.js",
    "serve": "node ./dist/index.js"
  }

【讨论】：

这就是我所拥有的 ' "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test ", "eject": "react-scripts 弹出", "electron": "electron." }, '
@takanoha 正如我所说，在部署项目之前尝试使用 babel 进行反编译。