TypeError：window.require 不是 electron.js 中的函数，仅在浏览器中答案

【问题标题】：TypeError: window.require is not a function in electron.js only in browserTypeError：window.require 不是 electron.js 中的函数，仅在浏览器中
【发布时间】：2021-09-08 18:53:31
【问题描述】：

我已经看到并完成了所有步骤 TypeError: window.require is not a function 和 Electron require() is not defined 和许多其他人。

我正在使用

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "concurrently": "^6.2.1",
    "electron": "^14.0.0",
    "electron-builder": "^22.11.7",
    "electron-is-dev": "^2.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "sqlite3": "^5.0.2",
    "wait-on": "^6.0.0",
    "web-vitals": "^1.0.1"
  },

我正在关注https://fmacedoo.medium.com/standalone-application-with-electron-react-and-sqlite-stack-9536a8b5a7b9 教程。

当我输入yarn electron-dev 时，小窗口出现并且看起来还可以但我不知道如何调试 - 没有控制台。

当我通过 localhost:3000 访问浏览器（opera 或 chrome）时，它会给我以下信息

目前，它适用于具有此类参数的小应用程序窗口（并且不适用于浏览器）：

mainWindow = new BrowserWindow({ width: 900, height: 680,     webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
    } });

如果我从index.js中删除员工

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

然后将index.html 中的代码更改为类似

<!DOCTYPE html>
<html>
<head>
    <title>Hello World App</title>
</head>
<body>
<h1>Hello World</h1>
<button id="btn">Click</button>
</body>
<script>
    window.api.loadscript('./index.js');
</script>
</html>

浏览器工作正常

好吧，我想在其中添加一些 UI，所以我不能只删除入口点来做出反应。上面这些链接的答案对我没有帮助，我想调试我的应用程序，而不仅仅是看到“小应用程序窗口”

提前致谢

ps 我敢在那个小窗口应用中通过添加打开控制台

 mainWindow.webContents.openDevTools();

但我还是想通过浏览器访问它

【问题讨论】：

标签： reactjs electron

【解决方案1】：

window.require() 是 Electron 注入/添加到浏览器窗口的东西。（如果您将 nodeIntegration 标志设置为 true）。

当直接在 localhost:3000（在 Electron 应用程序的上下文之外）运行 Web 应用程序时，它将无法访问 window.require() 然后失败。

改为使用 electron-dev 进行调试并设置 resizable-flag，并增加 mainWindow 的高度和宽度： https://www.electronjs.org/docs/api/browser-window#winresizable

mainWindow = new BrowserWindow({ 
   width: 1200,
   height: 800,
   resizable: true,
   webPreferences: {
        nodeIntegration: true,
        contextIsolation: false,
    }
 });
 mainWindow.webContents.openDevTools();

如果您仍然希望能够在浏览器中运行您的应用（但没有 Electron 功能），您可以使用检测 window.require()：

if("require" in window){
   const electron = window.require("electron")
   Code that uses electron... this will then only be run in the context of your Electron app and not in the browser.
}

或

if(!!window.require){
   const electron = window.require("electron")
   Code that uses electron... this will then only be run in the context of your Electron app and not in your browser
}

【讨论】：

Freedruk，谢谢，但我仍然想将那个单独的窗口直接集成到浏览器中。有可能吗？
用一种可能的解决方法更新了我的答案，让它在浏览器中运行......我没有在我自己的应用程序中尝试过这个，但理论上它应该可以工作:)