Electron: 在 main.js 之外需要电子会导致 TypeError

index.js:4 未捕获类型错误：fs.readFileSync 不是函数

您可以在此处包含index.js的第 4 行吗？ 还是更完整的堆栈跟踪？

我相信它指的是电子的 index.js，它本身位于项目的节点模块中。 以下是该文件的内容：

var fs = require('fs')
var path = require('path')

module.exports = path.join(__dirname, fs.readFileSync(path.join(__dirname, 'path.txt'), 'utf-8'))

整个堆栈跟踪表明与 React.js 存在冲突：

如果您从开发工具的控制台选项卡运行require('fs').readFileSync会发生什么？

看起来electron-prebuilt节点模块（您粘贴的文件）最终会出现在您的打包应用程序中，我认为您不需要它，因为它应该使用内置的electron要求。

@nukeop你是如何启动你的应用程序的。 你的 `start 脚本应该是这样的。

"scripts": {
  "start": "electron ."
}

我有一种感觉，你正试图用节点运行你的main.js

node main.js

哪个行不通

如果从开发工具的控制台选项卡运行 require('fs').readFileSync 会发生什么？

引发此错误后，我可以在控制台中运行require('fs').existsSync以打印函数的定义。 它在错误之前也有效。

看起来电子预构建的节点模块（您粘贴的文件）最终会出现在您的打包应用程序中，我认为您不想要它，因为它应该使用内置的电子要求。

我在开发时有一个 watchify 实例在后台运行，它不断更新我的包。 我在 package.json 的脚本部分中定义了它，如下所示：

"watch": "watchify app/app.js -t babelify -o public/js/bundle.js --debug --verbose"

关于避免捆绑electron-prebuilt的任何建议？

@nukeop Electron 在内部支持 require ，因此您不需要使用 browserify。

据我所知，你想使用 browserify，你必须排除“电子”。

有趣的是，可能是 watchify/browserify 毁了这个吗？ 到目前为止一切正常。

现在我不确定没有它如何运行程序。

从字面上看，只是运行

electron .

在您的主应用程序文件夹中，使用 Electron 时不需要捆绑任何东西，因为它在内部具有完整的节点环境。

_我将关闭它，因为它是一个 Browserify 问题_

这就是我一直在做的事情，将程序打包成一个 .js 文件，该文件包含在一个简单的 html 文件中，其中包含：

  <script src="public/js/bundle.js">
  </script>

一切正常，除非我使用require。 这是两个模块之间交互的问题。

如果我不将整个程序打包成一个包，我就没有简单的方法来运行它，因为我的 main.js 只启动电子并加载包含包的 html 文件。

@nukeop Electron 中的渲染器进程也可以访问完整的节点/commonjs 环境，因此您不需要捆绑任何东西。

如果我不将整个程序打包成一个包，我就没有简单的方法来运行它，因为我的 main.js 只启动 electron 并加载包含包的 html 文件。

我不确定我是否理解这里，您在 HTML 文件中加载的任何脚本都有完整的 commonjs 环境，因此可以使用require加载额外的文件而无需浏览任何内容

对于将来遇到此问题并阅读此线程的任何人，使用window.require代替 require 是避免电子和 browserify 的require函数之间冲突的一种可能性。

FWIW，我尝试在渲染器进程中使用电子时遇到了同样的问题，create-react-app 在后端使用 webpack 而不是 browserify。 window.require似乎也为我解决了这个问题，尽管我不完全清楚为什么。

编辑：我知道为什么:-)我们想在运行时从运行时提供的nodejs环境而不是webpack编译期间使用的nodejs环境在运行时require electron 。 默认情况下，全局变量绑定到window并且 webpack 编译忽略window全局变量 - 因此window.require有效。

告诉 webpack 忽略全局名称的另一种方法是在 JS 文件中使用类似/*global Android*/的注释。 在另一个在 Android WebView 中使用 CRA 构建应用程序的项目中，我使用上述方法通过 Webview 提供的 JavaScript 接口访问暴露给 JS 的 Java 对象。

@nukeop - 感谢您的上一篇文章； 这对我帮助很大。 window.require为我工作。

是的，修复了我的创建反应应用程序/webpack 问题。
改变

import electron, { ipcRenderer } from 'electron'

到

const electron = window.require("electron")

@srinathh您如何将 CRA 应用程序作为渲染器公开/加载到您的主程序中？ 您是先构建（并修改 html 静态资源路径）

是的，我目前的工作流程基本上是使用 CRA 脚本运行npm run build ，然后使用电子运行build文件夹中的输出。 您无需手动修改静态资源路径。 在 CRA 脚本的package.json中，您只需要像这样设置homepage并且路径将被适当地设置。

    "homepage": "./"

此外，我在public文件夹中有电子应用程序的main.js和package.json 。 因此，运行构建会自动将它们复制过来，您只需运行electron build/即可启动您的应用程序。

我实际上希望能够使用电子进行npm start进行开发，但我还没有弄清楚如何使其工作。 我猜我必须做一个eject并手动修改脚本。

如果您想查看设置示例 - 请查看https://github.com/srinathh/snippetfu

我没有使用 Electron，而是 Node-Webkit (nw.js)。
使用window.require也解决了我的问题。 非常感谢！

@nukeop window.require也为我做了诀窍，非常感谢！ 🎉

@nukeop我得到了同样的错误，但它已经解决了 window.require 技巧，非常感谢！

window.require确实解决了fs.existsSync is not a function的问题，但它导致了另一个错误： window.require不是函数。 我该如何解决？

@steric85你在使用 browserify、babel 还是 webpack？ 您可能需要转译您的代码

@Alxmerino我正在使用 webpack。

确保你正在编译你的代码

@ steric85 ，我在打字稿中遇到了window.require is not a function ，我设法以这种方式修复它：

declare global {
  interface Window {
    require: any;
  }
}

const electron = window.require('electron');

我正在使用上述方法从我的 Angular 应用程序中的电子访问 ipcRenderer，但是当我使用 ipcRenderer 消息处理程序更新 Observable 时，Angular 更改检测不起作用。
是不是因为 Angular 不知道 ipcRenderer 是一个 EventEmitter 并且当 ipcRenderer 事件进来时它需要运行更改检测？

在 Angular 2 中，我曾经调用applicationRef.tick()来明确告诉 Angular 刷新其状态。 https://angular.io/api/core/ApplicationRef

我面临与@nukeop和@srinathh非常相似的问题：我按照这篇文章指南设置了我的Electron + React + Webpack 项目，最后作者提到了window.require的技巧。 我的项目中只有require('electron')两个地方； 在 Electron 的入口点，以及一些 React 组件所需的 JavaScript 控制器类中。 在我的 Electron 入口点文件中，我只需执行const electron = require('electron'); ，因为它应该在主进程中运行（对吗？），在我的控制器类中，我执行const Electron = window.require('electron').remote;后跟const Jsonfile = Electron.require('jsonfile'); ，这应该是这样做的方式，因为它在渲染器进程中运行。 但是我在 node_modules/electron/index.js 的第 6 行遇到了与@nukeop ("TypeError: fs.ExistsSync is not a function") 相同的错误，如下所示：

var fs = require('fs')
var path = require('path')

var pathFile = path.join(__dirname, 'path.txt')

if (fs.existsSync(pathFile)) {
  module.exports = path.join(__dirname, fs.readFileSync(pathFile, 'utf-8'))
} else {
  throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again')
}

我试过删除 node_modules/electron 并再次安装。
我在 macOS 10.12.6 上使用 Electron 1.7.5，并使用npm run dev作为本文中的设置来启动我的项目。

更新; 我找到了导致我的错误的require ，我尝试在我的 React index.js 中执行require('electron-react-devtools') 。 将其更改为const ReactDevtools = Electron.require('electron-react-devtools');停止了错误，但现在我似乎无法在 ReactDevtools 实例中调用.inject() （“不是函数”），但这可能不是这里要讨论的问题.

@steric85这是因为您在网页环境中运行应用程序 => 您必须在 Electron 环境（Nodejs 环境）中运行应用程序

• require('electron') => Webpack 会将 electron 模块捆绑到 bundle.js => electron 使用 fs 模块 => Webpack 不理解
• window.require('electron') => Webpack 将忽略 require 函数
• 在网页环境中，window.require 将是未定义的
• 在 nodejs 环境中，window.require 将工作
  => 在 Electron 窗口中打开您的应用程序（而不是在 Chrome、Firefox 等浏览器窗口中。

我仍然得到window.require is not a function 。 我将 Electron 与 React Starter Kit (https://github.com/kriasoft/react-starter-kit) 一起使用。 一切都很好，除了这个。

我已将我的 Electron 应用程序设置为从网络加载我的应用程序，因此该应用程序未在本地运行：
https://gist.github.com/holgersindbaek/68f6db82f507967a51ca75c527faeff6

我正在尝试做的是在我的一个 React 文件中调用ipcRenderer 。 我不确定当我的应用程序从网络加载时是否有可能。 有什么建议？

@holgersindbaek您不应该在Chrome，Firefox等浏览器中查看您的应用程序。它不起作用，因为它是网页环境。
您应该在 Electron 窗口中查看您的应用程序。

我是，但我以某种方式使用 Electron，每次启动时我都会从网站加载我的应用程序。 本质上，我在我的电子应用程序中展示了一个网站。 请参阅上面的文件。 我只是想确定我真的无能为力？！

Electron 可以加载任何 URL。 为了加载一个 URL，你应该使用这个函数 mainWindow.loadURL(url)
=> 在电子窗口视图中，该 URL javascript 代码可以访问 require、ipc 等。

行。 我会试试的。

电子上的window.require不起作用，但是window.require的fs #$1$#$ 起作用了。

不太清楚为什么。 但它正在工作，因为这是一个小型个人项目，我不打算推​​动这个问题。

谢谢@nukeop

嗨，这是我的 package.json，我正在使用 webpack，这些都没有解决我的问题，有人有解决方案吗？ 使用 window.require 后，出现错误“未定义窗口”

'使用严格';

var 电子 = 需要（'电子'）
变种应用程序=电子.app；
var BrowserWindow = 电子.BrowserWindow;
var mainWindow = null;

app.on('准备好了', function() {
mainWindow = new BrowserWindow({width: 800, height: 600});

mainWindow.loadURL('file://' + __dirname + '/index.electron.html');

mainWindow.webContents.openDevTools();

});

我正在使用打字稿，我不得不使用

const electron = (<any>window).require("electron");

让我的渲染器与我的主要通信。 希望这可以帮助某人。

这对我有用。
例如，如果你想需要远程，那么

声明常量窗口：任何；
const { remote } = window.require('electron');

嗨，谢谢大佬。

2017 年 12 月 3 日星期日晚上 9:29，Michael - ሚካኤል ሰልጠነ <
通知@github.com> 写道：

这对我有用。
例如，如果你想需要远程，那么

声明常量窗口：任何；
const { remote } = window.require('electron');

—
您收到此消息是因为您发表了评论。
直接回复此邮件，在 GitHub 上查看
https://github.com/electron/electron/issues/7300#issuecomment-348801405 ，
或使线程静音
https://github.com/notifications/unsubscribe-auth/ARDyd4c3aOkMbb058xklujMMbnmaoxKGks5s8uGVgaJpZM4KDU6t
.

@solominh感谢您在这里的解释。 但是我有与@holgersindbaek类似的配置，哪个环境是webview 中的预加载脚本？

信息：

• 我的电子条目运行mainWindow.loadURL(url) ，其中 url 是本地 index.html
• 这个 index.html 有一个<webview>
• webview 有一个preload字段，它加载inject.js，这个脚本执行window.require('electron')。

评论：

• 如果我使用const electron = require('electron') ，则会出现错误fs.readFileSync is not a function
• 如果我使用const electron = window.require('electron') ，则会出现错误window.require is not a function 。
• inject.js 通过 webpack 捆绑（如果相关，可以粘贴配置）。

编辑：使用<webview nodeintegration="true">和 window.require 为我解决了问题。 在此处留下注释以供将来参考。

window.require 为我工作！ 多谢你们！

https://imgur.com/a/ekWwD

当我尝试这个时浏览器中的错误消息

忘记恢复nodeIntegration: false甚至禁用window.require().. 。 愚蠢的错误。 希望这可以节省一个小时的研究时间。

@phil294谢谢伙计！ 你真的节省了一个小时的研究时间。

嗨@micsel ，
我包括了 declare const window: any;
但它抛出语法错误。
任何想法为什么？

是的，把声明常量窗口：任何； 在顶部，就在导入的位置之后。

如果你得到 window.require 不是一个函数并且你使用的是 Angular-CLI，使用下面的代码来实例化 Window 接口：

./src/typings.d.ts

declare var window: Window;
interface Window {
    require: any;
}

然后你可以用它来包含电子：
const { ipcRenderer } = window.require('electron');

如果您在电子应用程序中使用 angular 2+，则导入“ngx-electron”库并在 any.componets.ts 中使用它

import { ElectronService } from 'ngx-electron';

//constructor
constructor(
    private elt: ElectronService
  ){
  var fs = this.elt.remote.require('fs');
}

我正在将 react js 与电子一起使用，当我将此行运行到终端 yarn run start 时，它向我提供了错误Uncaught Type Error: window.require is not a function我没有使用 typescript 如何在 React Js 中声明窗口

仍然面临这个问题的人，不知何故做window.require()破坏了在整个代码库中使用import语句的一致性。 一个简单的替代方法是将你的 webpack target设置为electron-renderer 。 如果使用Create React App ，弹出可能会一团糟。 因此，你可以使用这个包来为你做 webpack 钩子，你可以在你的 React 组件（或任何其他节点模块）中使用import fs from 'fs' ，在你的生活中快乐:)

在带有 Vue CLI 3 的 Windows 上，window.require 可以工作，但需要完整路径而不是来自“node_modules/”的相对路径。

但与 React 案例类似，可以通过编辑 vue.config.js 为 Vue 正确配置 webpack。 然后“require”将按预期工作。

vue.config.js：

module.exports = {
    configureWebpack: config => {
      if (process.env.NODE_ENV === 'production') {
        config.output.publicPath = `${process.cwd()}/dist/`
      }
      config.target = 'electron-renderer'
    }
  }

router.js（这只是一个示例，它可以在任何其他 vue js 文件中使用）

const Store = require("electron-store");
const store = new Store();

_我几乎不想添加这个，但它会为我节省一两个小时的调试时间。_

我不得不rm -rf node_modules && npm install来解决这个问题。 然后我能够从window.require中删除window #$ 并且事情又开始工作了。 希望这对其他人有帮助。

@cperthuis我只想说声谢谢！！ 哈哈，我什至没有使用 Vue，但逻辑思维使我发现我可以将 webpack.config.js 更改为具有目标属性:)

像魅力一样工作。

你好，

window.require在开发本地服务器环境中工作，但在将 React 应用程序构建为缩小的 HTML 文件后不在 prod 环境中。

function createWindow() {
  win = new BrowserWindow({
    width: 1280,
    height: 720,
    icon: path.join(__dirname, 'assets/icons/png/64x64.png'),
    webPreferences: {
      nodeIntegration: true,
      preload: __dirname + '/preload.js'
    }
  })

  win.setPosition(0, 0)

  win.loadURL(isDev ? 'http://localhost:3000' : `file://${path.join(__dirname, 'build/index.html')}`)
}

它适用于localhost:3000但不适用于file://${path.join(__dirname, 'build/index.html')}

https://imgur.com/EE7jxZq

@cperthuis ，您的修复适用于使用“react-app-rewired”的未弹出的 CRA 应用程序。 谢谢。

使用 Create-React-App 2，您可以使用craco npm 模块：

https://www.npmjs.com/package/@craco/craco

在 package.json 中将react-scripts更改为craco

craco.config.js

module.exports = {
    webpack: {
        configure: {
            target: 'electron-renderer'
        }
    }
};

并且您将可以像这样访问您的电子上下文：

import Electron from 'electron';
const { dialog } = Electron.remote;

@Maxou44感谢有关 craco 和电子的提示。 这正是我所需要的。 如果有人正在寻找一个例子......

https://github.com/wwlib/cra-craco-electron-example

@wwlib没问题，很高兴看到它对你有帮助🥳

忘记恢复nodeIntegration: false甚至禁用window.require().. 。 愚蠢的错误。 希望这可以节省一个小时的研究时间。

太感谢了。

请注意，如果您正在加载远程内容，请将nodeIntegration设置为 false 很重要： https: //electronjs.org/docs/tutorial/security#2 -disable-nodejs-integration-for-remote -内容

你好，
我有同样的错误。 使用 window.require 时， Uncaught TypeError: fs.readFileSync is not a function错误已修复，但我想出了另一个错误Uncaught TypeError: window.require is not a function 。

有没有关于如何解决这个问题的建议。 我在节点 js 上使用 browserify。

对于仍然坚持这一点的任何人：除非您在声明 BrowserWindow 时明确声明nodeIntergation为true $ ，否则您将收到错误window.require is not a function BrowserWindow ：

new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
    }
});

我发现的唯一一个足够好的解决方案如下：

1. 安装为开发依赖react-app-rewired包
2. 使用此模块注入自定义 Webpack 配置，而不使用eject -ing CRA：

 "scripts": {
   ...
    "start": "react-app-rewired start",
  },

1. 并添加具有相应内容的文件config-overrides.js ：

module.exports = function override (config, env) {
  config.target = 'electron-renderer'
  return config;
}

感谢： @Lilanga评论、 @agrublev评论和react-app- rewired 的创建者。

更新：
实际上如何做同样的第二个版本： https ://www.codementor.io/randyfindley/how-to-build-an-electron-app-using-create-react-app-and-electron-builder-ss1k0sfer

更新2：
@nukeop我删除了一些误导性陈述，因为没有时间关注关于为什么不使用 Browserify 或为什么使用它的辩论，现在无法写下我的意思的详细解释。 但我会保留个人意见，认为“只需使用window.require即可解决问题”似乎非常不可靠。

不正确怎么办？

这是一个必须在 Electron 环境中运行的 React 应用程序，反之亦然

什么？

_我几乎不想添加这个，但它会为我节省一两个小时的调试时间。_

我不得不rm -rf node_modules && npm install来解决这个问题。 然后我能够从window.require中删除window #$ 并且事情又开始工作了。 希望这对其他人有帮助。

哇.. 尝试了此线程中的所有内容并错过了您的重播，因为没有赞成票.. 仍然得到window is not a function ..
删除并重新安装node_modules及其工作。

PS：你仍然需要做所有的解决方案，但如果你做了一切
仍然一样重新安装node_modules

你拯救了我的一天@joshuapinter ！

使用 react-create-app 我发现了同样的错误。
到目前为止的解决方案是：
const electron = window.require("electron")在电子部分BrowserWindow中添加nodeIntegration:true ，方法如下。
mainWindow = new BrowserWindow({ width: 900, height: 680, webPreferences: { webSecurity: false, nodeIntegration: true } });

我发现的唯一一个足够好的解决方案如下：

1. 安装为开发依赖react-app-rewired包
2. 使用此模块注入自定义 Webpack 配置，而不使用eject -ing CRA：

 "scripts": {
   ...
    "start": "react-app-rewired start",
  },

1. 并添加具有相应内容的文件config-overrides.js ：

module.exports = function override (config, env) {
  config.target = 'electron-renderer'
  return config;
}

感谢： @Lilanga评论、 @agrublev评论和react-app- rewired 的创建者。

更新：
实际上如何做同样的第二个版本： https ://www.codementor.io/randyfindley/how-to-build-an-electron-app-using-create-react-app-and-electron-builder-ss1k0sfer

更新2：
@nukeop我删除了一些误导性陈述，因为没有时间关注关于为什么不使用 Browserify 或为什么使用它的辩论，现在无法写下我的意思的详细解释。 但我会保留个人意见，认为“只需使用window.require即可解决问题”似乎非常不可靠。

这对我有用。 谢谢

window.require的问题在于它仅适用于顶级包。
例如，如果我直接使用fs ，它可以工作。 但是，如果我使用的包依赖于fs ，那么我仍然会遇到异常。

window.require当我在 React App 中调用该函数时，它对我不起作用。 我得到“TypeError：window.require 不是函数”。

App.js ：
```javascript
从'react'导入反应，{ useEffect，useState}；
导入'./App.css'；

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

函数应用程序（）{

useEffect( () => {

    ipcRenderer.on('ping', (event, message) => { console.log(message) });

}, []);

return (
<div className = 'App'>
    <div className = 'Header-Arrow'></div>
    <div className = 'Box'>
        <p>Press ⌘ + ⇧ + 4</p>
    </div>
</div>
);

}

导出默认应用程序；
````

Main.js上的主窗口变量：
```javascript
// 创建浏览器窗口。
主窗口 = 新浏览器窗口（{
alwaysOnTop：是的，
框架：假，
全屏：假，
透明：真实，
titleBarStyle: 'customButtonsOnHover',
显示：假，
宽度：300，
身高：350，
网络偏好：{
节点集成：真，
预加载：__dirname + '/preload.js'
}
});

``` ** Preload.js`**:

javascript window.ipcRenderer = require('electron').ipcRenderer;

我错过了什么？

所以，问题解决了。 我回答自己是因为也许有人可以从中受益（我坚持了几个小时）。 如果你有一个Preload.js文件，你不需要再次从Àpp.js (renderer) 调用window.require('electron').ipcRenderer ； 您直接将变量称为window.ipcRenderer ，如下所示：

App.js ：

````javascript
从'react'导入反应，{ useEffect，useState}；
导入'./App.css'；

函数应用程序（）{

useEffect( () => {

    window.ipcRenderer.on('ping', (event, message) => { console.log(message) });

}, []);

return (
<div className = 'App'>
    <div className = 'Header-Arrow'></div>
    <div className = 'Box'>
        <p>Press ⌘ + ⇧ + 4</p>
    </div>
</div>
);

}

导出默认应用程序；
````

Main.js上的主窗口变量：
javascript // Create the browser window. mainWindow = new BrowserWindow({ alwaysOnTop: true, frame: false, fullscreenable: false, transparent: true, titleBarStyle: 'customButtonsOnHover', show: false, width: 300, height: 350, webPreferences: { nodeIntegration: true, preload: __dirname + '/preload.js' } });
Preload.js ：

javascript window.ipcRenderer = require('electron').ipcRenderer;

从命令行运行应用程序后，React 进程生成的窗口会抛出错误（ipcRenderer 未定义）。 忽略它。 Electron 进程（主应用程序）生成的窗口可以正常工作。

使用 Create-React-App 2，您可以使用craco npm 模块：

https://www.npmjs.com/package/@craco/craco

在 package.json 中将react-scripts更改为craco

craco.config.js

module.exports = {
    webpack: {
        configure: {
            target: 'electron-renderer'
        }
    }
};

我在require("fs")和window.require("fs")时遇到了问题。 感谢@Maxou44在本次讨论中介绍 CRACO。

为了解决这个问题，我在项目中做了 3 处更改：

1. 按照@Maxou44 的建议使用了 CRACO。
2. 在 public/main.js（有些人可能将此文件命名为 electron.js），更改
   new BrowserWindow({ width: 1200, height: 800 })
   到
   new BrowserWindow({ width: 1200, height: 800, webPreferences: { nodeIntegration: true } })
3. 将const fs = require("fs")替换为const fs = require("electron").remote.require("fs")

请参阅@wwlib的这个 git repo 以获得更多说明https://github.com/wwlib/cra-craco-electron-example

我从上到下阅读了整个线程，但没有任何效果。
除了上面的@Saroopashree的方法。 感谢@Saroopashree分享解决方案。
我想自从线程开始以来 react 和 webpack 已经发生了一些变化，上面的解决方案已经过时了。 我当然可能错了，但使用上述方法有效。
这就是我所做的：

1. 跑npm install craco -D
2. 创建配置文件craco.config.js并粘贴以下代码
   module.exports = { webpack: { configure: { target: 'electron-renderer' } } };
3. 更新了 main.js 中的new BrowserWindow({ width: 1200, height: 800, webPreferences: { nodeIntegration: true } }) 。 当然有不同的宽度和高度。
4. Ran npm start为使用 create-react-app 创建的 react 应用程序启动开发服务器。 这打开了一个具有相同错误的选项卡。 我又觉得累了。
5. Ran npm run electron运行电子应用程序。
   还有维奥拉！！！ 我能够看到该页面。

所以谢谢@Saroopashree。

如果您尝试在反应组件/类中访问“电子”或其其他组件，请尝试以下操作： #336757899

感谢@tumbledwyer将链接发布到适合我的解决方案：

更新：
实际上如何做同样的第二个版本： https ://www.codementor.io/randyfindley/how-to-build-an-electron-app-using-create-react-app-and-electron-builder-ss1k0sfer

Randy Findley 的解决方案：
现在，如果您需要像我一样访问fs模块，您将很快遇到Module not found错误

首先，安装Rescripts 。

yarn add @rescripts/cli @rescripts/rescript-env --dev

然后，从这里更改 package.json 中的脚本标签...

"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",

对此

"start": "rescripts start",
"build": "rescripts build",
"test": "rescripts test",

现在添加一个名为.rescriptsrc.js的新文件，其内容如下：

module.exports = [require.resolve('./.webpack.config.js')]

最后添加另一个名为.webpack.config.js的新文件，其内容如下：

// define child rescript
module.exports = config => {
  config.target = 'electron-renderer';
  return config;
}

现在您可以使用fs模块，不用担心。

@ledleds指出的内容对我有用，将 CRA 与 typscript 和 Electron 结合使用。 然后事情是我这样声明 webPreferences ：

    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    },

所以这似乎将nodeIntegration覆盖/设置为false，因此将其设置为true并重新启动应用程序解决了问题（您必须重新启动应用程序才能使用该配置加载Electron窗口）

像这样将nodeIntegration设置为true

    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true
    },

对于仍然坚持这一点的任何人：除非您在声明 BrowserWindow 时明确声明nodeIntergation为true $ ，否则您将收到错误window.require is not a function BrowserWindow ：

new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
    }
});

react-app-rewired

这是我在可扩展性方面找到的唯一好的解决方案，我认为任何人都不应该依赖 window.require

为什么 window.require 不可扩展？

对于碰巧遇到此问题或类似问题并正在使用 Vue 和 vue-electron-builder 的任何人，请参阅此处

对于仍在为此苦苦挣扎的人，尤其是关于通过反应按钮退出电子应用程序的人，请继续阅读。

对我有帮助的是以下内容：

1. 当您声明您的窗口时，请确保您设置nodeIntegration: true ，因为出于安全原因，目前默认false 。 通常这是在您的electron.js文件中完成的。

2. 正如@packetstracer已经提到的：_您必须重新启动应用程序才能使用该配置加载电子窗口_

mainWindow = new BrowserWindow({
//...
  webPreferences: {
    nodeIntegration: true,
  },
});

1. 同样在您的electron.js中将以下语句放在顶部附近，以确保ipcMain将侦听事件_“close-me”_：

const { ipcMain } = require("electron");
ipcMain.on("close-me", (evt, arg) => {
  app.quit();
});

1. 在 _"close"_-button 所在的反应组件中，在导入后添加以下window.require语句。 通常的require不起作用：

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

1. 为了关闭您的应用程序，请调用以下语句。 它应该将事件 _"close-me"_ 发送到 ipcMain：

<Button label="close" onClick={(e) => ipcRenderer.send("close-me")} />

随时发表评论并提供反馈我对电子还是很陌生。
我知道退出按钮的上下文是不相关的，但我找不到更合适的线程。 如果有的话，请随时向我指出另一个更合适的线程。

我的配置：

"electron": "9.2.0",
"electron-builder": "22.8.0",
"electron-packager": "15.0.0",

为我解决了！！ 谢谢@nukeop

`
`

有谁知道如何在打字稿中设置正确的类型？

我现在有以下

export const electron = window.require('electron').remote

我想要类似的东西

export const electron = window.require('electron').remote as ElectronType

所以 IDE 知道如何自动完成电子 API。

@timsamart它确实有效。 谢谢，它为我节省了几天的工作时间。 🤣

在花了很多时间尝试上面的所有内容之后，我错过了如果你使用BrowserView的部分，就像你需要显式启用 node.js 一样BrowserWindow ：

     new BrowserView({ // is a BrowserView not a BrowserWindow
        webPreferences: {
          nodeIntegration: true,
        },
      })

[email protected]