Electron: main.jsの外部で電子を要求すると、TypeErrorが発生します

index.js：4 Uncaught TypeError：fs.​​readFileSyncは関数ではありません

ここにindex.jsの4行目を含めることができますか？ または、より完全なスタックトレースですか？

それ自体がプロジェクトのノードモジュールにあるelectronの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 requireを使用する必要があるため、これは望ましくないと思います。

@nukeopアプリをどのように起動していますか。 `開始スクリプトは次のようになります。

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

main.jsをノードで実行しようとしているように感じます

node main.js

うまくいかない

開発ツールの[コンソール]タブからrequire（ 'fs'）。readFileSyncを実行するとどうなりますか？

このエラーがスローされた直後に、コンソールでrequire('fs').existsSyncを実行して、関数の定義を出力することができます。 エラーの前にも機能します。

代わりに組み込みのelectronrequireを使用する必要があるため、electron-prebuiltノードモジュール（貼り付けたファイル）がパッケージ化されたアプリに含まれるようになります。

開発中、パッケージを継続的に更新しているwatchifyインスタンスがバックグラウンドで実行されています。 package.jsonのscriptsセクションで次のように定義しました。

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

electron-prebuiltのバンドルを回避するためのアドバイスはありますか？

@nukeop Electronは内部的にrequireをサポートしているため、browserifyを使用する必要はありません。

私の知る限り、browserifyを使用したいのですが、「electron」を除外する必要があります。

興味深いことに、watchify / browserifyがこれを台無しにしている可能性がありますか？ これまでは問題なく動作しました。

今、私はそれなしでプログラムを実行する方法がわかりません。

文字通りただ走る

electron .

Electronは内部にフルノード環境を備えているため、メインのアプリフォルダーから、Electronを使用するときに何もバンドルする必要はありません。

_Browserifyの問題なので、これを終了します_

これは私がずっとやってきたことであり、プログラムを単一の.jsファイルにパックします。このファイルは、次のような単純なhtmlファイルに含まれています。

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

そして、requireを使用する場合を除いて、すべてが機能します。 これは、2つのモジュール間の相互作用の問題です。

プログラム全体をバンドルにパックしないと、main.jsがelectronを起動し、バンドルを含むhtmlファイルをロードするだけなので、簡単に実行する方法がありません。

@nukeop Electron内のレンダラープロセスは、完全なノード/ commonjs環境にもアクセスできるため、何もバンドルする必要はありません。

プログラム全体をバンドルにパックしないと、main.jsがelectronを起動し、バンドルを含むhtmlファイルをロードするだけなので、簡単に実行する方法がありません。

ここで理解できるかどうかはわかりません。HTMLファイルにロードするスクリプトは完全なcommonjs環境を備えているため、 requireを使用して、何もブラウザ化せずに追加のファイルをロードできます。

将来この問題に遭遇し、このスレッドを読む人にとって、requireの代わりにwindow.requireを使用することは、electronとbrowserifyのrequire関数間の競合を回避する1つの可能性です。

FWIW、browserifyの代わりにバックエンドでwebpackを使用するcreate-react-appを使用して、レンダラープロセスでelectronを使用しようとすると同じ問題が発生しました。 window.requireは私にとってもそれを解決しているようですが、理由は完全にはわかりません。

編集：理由を理解しました:-) webpackによるコンパイル中に使用されるnodejs環境ではなく、実行時に提供されるnodejs環境から実行時にrequire electronにしたいのです。 デフォルトでは、グローバルはwindowにバインドされ、webpackのコンパイルはwindowグローバルを無視します-したがって、 window.require機能します。

グローバル名を無視するようにwebpackに指示する別の方法は、JSファイルで/*global Android*/のようなコメントを使用することです。 Android WebViewでCRAビルドアプリを使用する別のプロジェクトでは、上記を使用して、Webviewが提供するJavaScriptインターフェイスを介してJSに公開されたJavaオブジェクトにアクセスしました。

@ nukeop-最後の投稿に感謝します。 それは私を大いに助けました。 window.requireは私のために働いた。

うん、私のcreatereactアプリ/ 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 、私はtypescriptで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') 2か所しかありません。 Electronのエントリポイント、および一部のReactコンポーネントに必要なJavaScriptコントローラークラス。 Electronエントリポイントファイルでは、メインプロセスで実行する必要があるため、 const electron = require('electron');を実行します（右？）。コントローラークラスでは、 const Electron = window.require('electron').remote;の後にconst Jsonfile = Electron.require('jsonfile');を実行します。 しかし、node_modules / electronic / 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を削除して再インストールしてみました。
私はmacOS10.12.6でElectron1.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 use fs module => Webpackは理解しません
• window.require（ 'electron'）=> Webpackはrequire関数を無視します
• Webページ環境では、window.requireは未定義になります
• nodejs環境では、window.requireが機能します
  =>アプリをElectronウィンドウで開きます（Chrome、Firefoxなどのブラウザウィンドウでは開きません）。

まだwindow.require is not a functionを受け取っています。 Electron with React Starter Kit（https://github.com/kriasoft/react-starter-kit）を使用しています。 これを除いて、すべてがうまく機能しています。

ElectronアプリをWebからアプリをロードするように設定したため、アプリはローカルで実行されていません。
https://gist.github.com/holgersindbaek/68f6db82f507967a51ca75c527faeff6

私がやろうとしているのは、私のReactファイルの1つでipcRendererを呼び出すことです。 ただし、アプリがWebから読み込まれている場合でも、それが可能かどうかはわかりません。 助言がありますか？

@holgersindbaek Chrome、Firefoxなどのブラウザでアプリを表示しないでください。Webページ環境であるため、機能しません。
Electronウィンドウでアプリを表示する必要があります。

私はそうですが、ある意味でElectronを使用しており、起動するたびにWebサイトからアプリをロードしています。 基本的に、私は自分のエレクトロンアプリでウェブサイトを表示しています。 上記のファイルを参照してください。 本当に自分にできることは何もないことを確認したいだけですか？！

Electronは任意のURLをロードできます。 URLをロードするには、この関数mainWindow.loadURL（url）を使用する必要があります
=>電子ウィンドウビューでは、そのURL javascriptコードはrequire、ipcなどにアクセスできます。

Ok。 やってみます。

電子のwindow.requireは機能しませんでしたが、 fsのwindow.require $＃$は機能しました。

理由はよくわかりません。 しかし、それは機能しており、それは小さな個人的なプロジェクトなので、私はこの問題を推し進めるつもりはありません。

ありがとう@nukeop

こんにちは、これは私のpackage.jsonです、私はwebpackを使用しています、これらのどれも私の問題を解決しませんでした、誰かが解決策を持っていますか？ window.requireを使用した後、「ウィンドウが定義されていません」というエラーが発生しました

'厳密に使用';

var electronic = require（ 'electron'）
var app = electronic.app;
var BrowserWindow = electronic.BrowserWindow;
var mainWindow = null;

app.on（ 'ready'、function（）{
mainWindow = new BrowserWindow（{幅：800、高さ：600}）;

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

mainWindow.webContents.openDevTools();

}）;

私はtypescriptを使用していて、使用しなければなりませんでした

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

レンダラーがメインと通信できるようにします。 これが誰かを助けることを願っています。

これは私のために働いた。
たとえば、リモートが必要な場合は、

const windowを宣言します：any;
const {remote} = window.require（ 'electron'）;

こんにちは、ありがとうございます。

2017年12月3日午後9時29分、マイケル-
[email protected]>は次のように書いています：

これは私のために働いた。
たとえば、リモートが必要な場合は、

const windowを宣言します：any;
const {remote} = window.require（ 'electron'）;

—
コメントしたのでこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/electron/electron/issues/7300#issuecomment-348801405 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/ARDyd4c3aOkMbb058xklujMMbnmaoxKGks5s8uGVgaJpZM4KDU6t
。

@solominhここで説明してくれてありがとう。 しかし、私は@holgersindbaekと同様の構成を持っていますが、どの環境がWebビューのプリロードスクリプトですか？

情報：

• 私の電子エントリはmainWindow.loadURL(url)を実行します。ここで、urlはローカルindex.htmlです。
• このindex.htmlには<webview>があります
• Webビューにはinject.jsをロードするpreloadフィールドがあり、このスクリプトは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

これを試したときのブラウザのエラーメッセージ

window.require()..も無効にするnodeIntegration: falseを元に戻すのを忘れました。 愚かな間違い。 これが誰かに1時間の研究を惜しまないことを願っています。

@ phil294ありがとうございます！ あなたは本当に1時間の研究を節約しました。

こんにちは@micsel 、
私はdeclareconst window：any;を含めました。
しかし、構文エラーをスローしています。
なぜ何かアイデアはありますか？

ええ、宣言constウィンドウを置きます：任意; 上部、輸入品がある場所の直後。

window.requireが関数ではなく、Angular-CLIを使用している場合は、以下を使用してWindowインターフェイスをインスタンス化します。

./src/typings.d.ts

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

次に、これを使用して電子を含めることができます。
const { ipcRenderer } = window.require('electron');

電子アプリでAngular2 +を使用している場合は、 「ngx-electron」 libをインポートして、any.componets.tsで使用します。

import { ElectronService } from 'ngx-electron';

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

私は電子でreactjsを使用していますが、この行をターミナルヤーンの実行開始に実行すると、エラーが発生しますUncaught Type Error：window.requireは関数ではありませんtypescriptを使用していませんReactJsでウィンドウを宣言する方法

まだ問題に直面している人々は、どういうわけかwindow.require()を実行すると、コードベース全体でimportステートメントを使用する一貫性が損なわれます。 簡単な代替手段は、Webpack targetをelectron-rendererに設定することです。 Create React Appを使用している場合、イジェクトが混乱する可能性があります。 したがって、このパッケージを使用してWebpackをフックすることができ、たとえば、Reactコンポーネント（または他のノードモジュール）でimport fs from 'fs'を使用して、人生で楽しく使用できます:)

Vue CLI 3を使用するウィンドウでは、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();

_これを追加することはほとんどありませんが、デバッグにかかる​​時間を1〜2時間節約できたはずです。_

この問題を修正するには、 rm -rf node_modules && npm installする必要がありました。 その後、 window.require windowを削除することができ、作業が再開されました。 うまくいけば、それは他の誰かを助けるでしょう。

@cperthuisありがとうございました!! ははは、私はVueを使用していませんが、論理的思考により、webpack.config.jsを変更してターゲットプロパティを設定できることがわかりました:)

チャームのように働いた。

こんにちは、

window.requireは、開発ローカルサーバー環境では機能しますが、縮小されたHTMLファイルにReactアプリをビルドした後は、本番環境では機能しません。

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'
        }
    }
};

そして、あなたはそのようなあなたのElectronコンテキストにアクセスすることができます：

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

@ Maxou44クラコとエレクトロンについてのヒントをありがとう。 それは私が必要としていたものです。 誰かが例を探している場合に備えて...

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

@wwlib問題ありません、それがあなたを助けてくれてうれしいです🥳

window.require()..も無効にするnodeIntegration: falseを元に戻すのを忘れました。 愚かな間違い。 これが誰かに1時間の研究を惜しまないことを願っています。

どうもありがとう。

リモートコンテンツをロードする場合は、 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が発生します：

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

私が見つけた唯一の十分な解決策は次のとおりです。

1. 開発依存関係としてインストールreact-app-rewiredパッケージ
2. このモジュールを使用して、CRAをejectせずにカスタムWebpack構成を挿入します。

 "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の作成者。

更新しました：
実際には、同じ方法の2番目のバージョン： https ：//www.codementor.io/randyfindley/how-to-build-an-electron-app-using-create-react-app-and-electron-builder-ss1k0sfer

更新2：
@nukeop Browserifyを使用しない理由や使用する理由についての議論をフォローする時間がないため、誤解を招く記述をいくつか削除しました。意味する詳細な説明を書き留めることができません。 しかし、「 window.requireを使用するだけで問題が解決する」という個人的な意見は、非常に信頼できないように思われます。

どのように間違っていますか？

これはReactアプリであり、Electron環境内で実行する必要があり、その逆はできません。

何？

_これを追加することはほとんどありませんが、デバッグにかかる​​時間を1〜2時間節約できたはずです。_

この問題を修正するには、 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. このモジュールを使用して、CRAをejectせずにカスタムWebpack構成を挿入します。

 "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の作成者。

更新しました：
実際には、同じ方法の2番目のバージョン： 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アプリ内で関数を呼び出すと、機能しません。 「TypeError：window.requireは関数ではありません」というメッセージが表示されました。

App.js ：
`` `javascript
import React、{useEffect、useState} from'react ';
import './ App.css';

const ipcRenderer = window.require（ 'electron'）。ipcRenderer;

関数App（）{

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
//ブラウザウィンドウを作成します。
mainWindow = new BrowserWindow（{
alwaysOnTop：true、
フレーム：false、
フルスクリーン可能：false、
透明：真、
titleBarStyle： 'customButtonsOnHover'、
表示：false、
幅：300、
高さ：350、
webPreferences：{
nodeIntegration：true、
プリロード：__ dirname + '/ preload.js'
}
}）;

`` ` ** Preload.js` **：

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

私が欠けているものは何ですか？

だから、問題は解決しました。 多分誰かがそれから利益を得ることができるので私は自分自身に答えます（私は何時間も立ち往生しました）。 Preload.jsファイルがある場合は、 Àpp.js （レンダラー）からwindow.require('electron').ipcRendererを再度呼び出す必要はありません。 次のように、変数をwindow.ipcRendererとして直接呼び出します。

App.js ：

`` `` javascript
import React、{useEffect、useState} from'react ';
import './ App.css';

関数App（）{

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")の間に問題が発生しました。 このディスカッションでCRACOを紹介してくれた@ Maxou44に感謝します。

この問題を解決するために、プロジェクトに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リポジトリを参照してください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. npm startを実行して、create-react-appを使用して作成されたreactアプリの開発サーバーを起動します。 これにより、同じエラーでタブが開きました。 そしてまた疲れました。
5. npm run electronを実行して、electronアプリを実行しました。
   そしてヴィオラ!!! そのページを見ることができました。

だから@Saroopashreeありがとう。

「electron」またはreactコンポーネント/クラス内の他のコンポーネントにアクセスしようとしている場合は、これを試してください： ＃336757899

私のために働く解決策へのリンクを投稿してくれた@tumbledwyerに感謝します：

更新しました：
実際には、同じ方法の2番目のバージョン： 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のscriptsタグをこれから変更します...

"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が指摘したことは、typscriptとElectronでCRAを使用して、私のために機能しました。 次に、次のように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が発生します：

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

react-app-rewired

これは、スケーラビリティの観点から私が見つけた唯一の優れたソリューションでした。誰もwindow.requireに頼るべきではないと思います。

window.requireがスケーラブルでないのはなぜですか？

この問題または同様の問題に苦労していて、Vueおよびvue-electron-builderを使用している人は、こちらを参照してください。

特に反応ボタンを介して電子アプリケーションを終了することに関してこれにまだ苦労している人は、読んでください。

私にとって助けになったのは次のとおりです。

1. ウィンドウを宣言するときは、セキュリティ上の理由から、現在デフォルトでfalseになっているため、必ずnodeIntegration: trueを設定してください。 通常、これはelectron.jsファイルで行われます。

2. @packetstracerがすでに述べたように、_そのconfigでElectronウィンドウをロードするには、アプリを再起動する必要があります_

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" _-ボタンが配置されているreactコンポーネントで、インポート後に次の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

`
`

typescriptで適切なタイプを設定する方法を知っている人はいますか？

私は現在次のものを持っています

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

何か欲しいのですが

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

そのため、IDEはelectronAPIをオートコンプリートする方法を知っています。

@timsamartそれは動作します。 ありがとう、それは私に仕事の日を節約します。 🤣

上記のすべてを文字通り試して何時間も費やした後、$＃$ 1 $ BrowserViewを使用する場合の部分を見逃しました。これは、node.jsを明示的に有効にする必要があるBrowserWindowと同じです。

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

[email protected]