React/JS Uncaught ReferenceError: require is not defined

如何解决React/JS Uncaught ReferenceError: require is not defined

我刚刚开始学习 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,});

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

  //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",});
}

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

谢谢。

解决方法

您是否尝试过此解决方案？ :

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

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

我觉得你的代码需要先反编译，这是我的node.js项目的package.json的scripts部分，也许对你有用：

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

React/JS Uncaught ReferenceError: require is not defined

如何解决React/JS Uncaught ReferenceError: require is not defined

解决方法

相关推荐