Electron: يؤدي طلب إلكترون خارج main.js إلى حدوث خطأ في النوع

index.js: 4 خطأ في النوع غير معلوم: fs.readFileSync ليس دالة

هل يمكنك تضمين السطر 4 من index.js هنا؟ أو أثر كومة أكمل؟

أعتقد أنه يشير إلى 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 كيف تقوم بتشغيل التطبيق الخاص بك. يجب أن يبدو نص البداية كما يلي.

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

لدي شعور بأنك تحاول تشغيل main.js الخاص بك مع العقدة

node main.js

الذي لن يعمل

ماذا يحدث إذا قمت بتشغيل تتطلب ('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 داخليًا لذلك لا تحتاج إلى استخدام browserify.

بقدر ما أعلم ، كنت تريد استخدام browserify ، عليك استبعاد "الإلكترون".

مثير للاهتمام ، هل يمكن أن يكون برنامج watchify / browserify يفسد هذا؟ لقد عملت بشكل جيد حتى الآن.

الآن لست متأكدًا من كيفية تشغيل البرنامج بدونه.

مجرد تشغيل حرفيا

electron .

من مجلد التطبيق الرئيسي الخاص بك ، لا تحتاج إلى تجميع أي شيء عند استخدام Electron لأنه يحتوي على بيئة عقدة كاملة داخليًا.

_ سأقوم بإغلاق هذه المشكلة لأنها مشكلة في Browserify_

هذا ما كنت أفعله طوال الوقت ، حيث قمت بتعبئة البرنامج في ملف .js واحد ، والذي تم تضمينه في ملف html بسيط مع:

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

وكل شيء يعمل ، إلا عندما أستخدم تتطلب. هذه مشكلة في التفاعل بين الوحدتين.

إذا لم أحزم البرنامج بأكمله في حزمة ، فليس لدي طريقة سهلة لتشغيله ، حيث يبدأ main.js فقط الإلكترون ويحمل ملف html الذي يتضمن الحزمة.

nukeop تتمتع عملية العارض داخل Electron بإمكانية الوصول إلى بيئة عقدة / Commonjs كاملة أيضًا ، لذلك لا تحتاج إلى تجميع أي شيء.

إذا لم أحزم البرنامج بأكمله في حزمة ، فليس لدي طريقة سهلة لتشغيله ، حيث يبدأ main.js فقط الإلكترون ويحمل ملف html الذي يتضمن الحزمة.

لست متأكدًا من أنني أفهم هنا ، أي برنامج نصي تقوم بتحميله في ملف HTML الخاص بك يحتوي على بيئة Commonjs كاملة ويمكن بالتالي استخدام require لتحميل ملفات إضافية دون تصفح أي شيء

بالنسبة لأي شخص يواجه هذه المشكلة في المستقبل ويقرأ هذا الموضوع ، فإن استخدام window.require بدلاً من الطلب هو أحد الاحتمالات لتجنب التعارض بين وظيفة require الخاصة بالمتصفح والإلكترون.

FWIW ، واجهت نفس المشكلة أثناء محاولتي استخدام الإلكترون في عملية العارض باستخدام تطبيق create-react-app الذي يستخدم حزمة الويب في الواجهة الخلفية بدلاً من المتصفح. يبدو أن window.require يحل المشكلة بالنسبة لي أيضًا على الرغم من أنني لست واضحًا تمامًا لماذا.

تحرير : لقد اكتشفت السبب :-) نريد require electron أثناء وقت التشغيل من بيئة nodejs المتوفرة في وقت التشغيل بدلاً من بيئة nodejs المستخدمة أثناء التجميع بواسطة webpack. بشكل افتراضي ، ترتبط الكرة الأرضية بـ window ويتجاهل تجميع حزم الويب window global - ومن ثم يعمل window.require .

هناك طريقة أخرى لإخبار webpack بتجاهل الاسم العام وهي استخدام تعليق مثل /*global Android*/ في ملف JS. في مشروع آخر باستخدام تطبيق CRA المبني في Android WebView ، استخدمت ما سبق للوصول إلى كائن Java معروض لـ JS من خلال واجهة JavaScript المقدمة من Webview.

nukeop - شكرا على آخر مشاركة لك ؛ لقد ساعدتني كثيرا. عمل لي window.require .

نعم ، تم إصلاح مشكلة إنشاء التطبيق / حزمة الويب.
يتغير

import electron, { ipcRenderer } from 'electron'

ل

const electron = window.require("electron")

srinathh كيف تقوم بتعريض / تحميل تطبيق CRA الخاص بك كعارض في حسابك الرئيسي؟ هل تقوم بالبناء أولاً (وتعديل مسارات موارد html الثابتة)

نعم ، سير العمل الخاص بي حاليًا هو تشغيل npm run build باستخدام البرامج النصية CRA ثم تشغيل الإخراج في المجلد build مع الإلكترون. لا تحتاج إلى تعديل مسارات الموارد الثابتة يدويًا. في package.json لنصوص CRA ، تحتاج فقط إلى تعيين homepage مثل هذا وسيتم تعيين المسارات بشكل مناسب.

    "homepage": "./"

بالإضافة إلى ذلك ، لدي main.js و package.json لتطبيق الإلكترون في المجلد public . لذا فإن تشغيل الإصدار تلقائيًا ينسخها مرة أخرى ويمكنك فقط تشغيل 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؟ قد تحتاج إلى transpile التعليمات البرمجية الخاصة بك

Alxmerino أنا أستخدم حزمة الويب.

تأكد من تجميع التعليمات البرمجية الخاصة بك

@ steric85 ، واجهت window.require is not a function في الكتابة المطبوعة ، وتمكنت من إصلاحها بهذه الطريقة:

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

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

أنا أستخدم الطريقة المذكورة أعلاه للوصول إلى ipcRenderer من الإلكترون في تطبيق Angular الخاص بي ، لكن اكتشاف التغيير الزاوي لا يعمل عندما أقوم بتحديث برنامج Observable باستخدام معالج رسائل ipcRenderer.
هل ذلك لأن Angular لا يعرف أن ipcRenderer هو EventEmitter وأنه يحتاج إلى تشغيل اكتشاف التغيير عندما تأتي أحداث ipcRenderer؟

في Angular 2 ، اعتدت على الاتصال applicationRef.tick() لأقول صراحةً للزاوية لتحديث حالتها. https://angular.io/api/core/ApplicationRef

أواجه مشكلة مشابهة جدًا لـ nukeop و srinathh : لقد قمت بإعداد مشروع Electron + React + Webpack الخاص بي باتباع دليل المقالة هذا ، حيث يذكر المؤلف في النهاية الحيلة باستخدام window.require . أنا فقط require('electron') مكانين في مشروعي ؛ في نقطة دخول Electron ، وفي فئة تحكم JavaScript التي تتطلبها بعض مكونات React. في ملف نقطة إدخال الإلكترون الخاص بي ، أقوم ببساطة بعمل const electron = require('electron'); ، حيث يجب أن يتم تشغيله في العملية الرئيسية (أليس كذلك؟) ، وفي صنف وحدة التحكم الخاصة بي ، أقوم بعمل const Electron = window.require('electron').remote; متبوعًا بـ const Jsonfile = Electron.require('jsonfile'); ، والتي يجب أن تكون طريقة القيام بذلك نظرًا لأنه يعمل في عملية العارض. لكنني أحصل على نفس الخطأ nukeop ("TypeError: fs.ExistsSync ليست دالة") في السطر السادس في node_modules / electron / index.js الذي يبدو كالتالي:

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 1.7.5 على نظام macOS 10.12.6 ، وأبدأ مشروعي باستخدام npm run dev كإعداد في المقالة.

تحديث؛ لقد وجدت require الذي تسبب في الخطأ الخاص بي ، لقد حاولت عمل require('electron-react-devtools') في ملف React index.js الخاص بي. أدى تغييرها إلى const ReactDevtools = Electron.require('electron-react-devtools'); إلى إيقاف الأخطاء ، ولكن يبدو الآن أنه لا يمكنني استدعاء .inject() في مثيل ReactDevtools ("ليست وظيفة") ، ولكن قد لا يكون هذا شيئًا للمناقشة هنا .

@ steric85 لأنك تقوم بتشغيل التطبيق في بيئة صفحة الويب => يجب عليك تشغيل التطبيق في بيئة Electron (بيئة Nodejs)

• تتطلب ('إلكترون') => حزمة الويب ستجمع وحدة الإلكترون في bundle.js => استخدام الإلكترون fs module => Webpack لا تفهم
• window.require ('electron') => سيتجاهل Webpack وظيفة الطلب
• في بيئة صفحة الويب ، سيكون 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

ما أحاول فعله هو استدعاء ipcRenderer في أحد ملفات React الخاصة بي. لست متأكدًا مما إذا كان ذلك ممكنًا حتى عندما يتم تحميل تطبيقي من الويب. أي اقتراحات؟

holgersindbaek يجب ألا تشاهد تطبيقك في متصفح مثل Chrome و Firefox وما إلى ذلك. لن يعمل لأنه بيئة صفحة الويب.
يجب عليك عرض التطبيق الخاص بك في نافذة الإلكترون.

أنا ، لكني أستخدم Electron بطريقة ما ، حيث أقوم بتحميل تطبيقي من موقع الويب في كل عملية إطلاق. في الأساس ، أعرض موقع ويب في تطبيق الإلكترون الخاص بي. انظر الملف أعلاه. أريد فقط التأكد من أنه لا يوجد شيء يمكنني فعله حقًا ؟!

يمكن للإلكترون تحميل أي عناوين URL. لتحميل عنوان URL ، يجب استخدام هذه الوظيفة mainWindow.loadURL (url)
=> في عرض نافذة الإلكترون ، يتطلب الوصول إلى رمز جافا سكريبت URL هذا ، ipc ، إلخ.

موافق. سأحاول ذلك.

لم يعمل window.require على الإلكترون ، لكن window.require مقابل fs فعل ذلك.

لست متأكدا حقا لماذا. لكنه يعمل ولأنه مشروع شخصي صغير ، فلن أقوم بدفع المشكلة.

شكرا nukeop

مرحبًا ، هذه الحزمة الخاصة بي. json ، أنا أستخدم حزمة الويب ، ولم يحل أي منها مشكلتي ، هل لدى أي شخص حل؟ بعد استخدام window.require ، ظهر لي خطأ "النافذة غير محددة"

"استخدام صارم" ؛

فار إلكترون = يتطلب ('إلكترون')
تطبيق var = electron.app ؛
var BrowserWindow = electron.BrowserWindow ،
var mainWindow = خالية ،

app.on ('جاهز' ، وظيفة () {
mainWindow = BrowserWindow الجديد ({العرض: 800 ، الارتفاع: 600}) ؛

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

mainWindow.webContents.openDevTools();

}) ؛

أنا أستخدم الكتابة المطبوعة واضطررت لاستخدامها

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

للحصول على العارض الخاص بي للتواصل مع بلدي الرئيسي. أمل أن هذا يساعد شخصاما.

هذا عمل لي.
على سبيل المثال إذا كنت تريد أن تطلب جهاز التحكم عن بعد ، إذن

إعلان نافذة const: أي ؛
const {remote} = window.require ('electron') ؛

مرحبا شكرا يا رجل.

يوم الأحد ، 3 ديسمبر 2017 الساعة 9:29 مساءً ، مايكل - ሚካኤል ሰልጠነ <
[email protected]> كتب:

هذا عمل لي.
على سبيل المثال إذا كنت تريد أن تطلب جهاز التحكم عن بعد ، إذن

إعلان نافذة const: أي ؛
const {remote} = window.require ('electron') ؛

-
أنت تتلقى هذا لأنك علقت.
قم بالرد على هذا البريد الإلكتروني مباشرة ، وقم بعرضه على GitHub
https://github.com/electron/electron/issues/7300#issuecomment-348801405 ،
أو كتم الخيط
https://github.com/notifications/unsubscribe-auth/ARDyd4c3aOkMbb058xklujMMbnmaoxKGks5s8uGVgaJpZM4KDU6t
.

solominh شكرا للتفسيرات الخاصة بك هنا . ومع ذلك ، لدي تكوين مشابه مثل holgersindbaek ، ما هي البيئة التي تعد برنامج نصي للتحميل المسبق في عرض الويب؟

معلومات:

• يتم تشغيل إدخال الإلكترون الخاص بي mainWindow.loadURL(url) ، حيث يكون عنوان url هو index.html محلي
• يحتوي ملف index.html هذا على <webview>
• يشتمل عرض الويب على حقل preload يقوم بتحميل insert.js ، وهذا البرنامج النصي يقوم بعمل window.require ("الإلكترون").

ملاحظات:

• إذا استخدمت const electron = require('electron') ، يظهر الخطأ fs.readFileSync is not a function
• إذا استخدمت const electron = window.require('electron') ، يظهر الخطأ window.require is not a function .
• يتم تجميع injection.js من خلال webpack (يمكن لصق config إذا كان ذلك مناسبًا).

تحرير: تم الحل بالنسبة لي باستخدام <webview nodeintegration="true"> و window.require. ترك ملاحظة هنا للرجوع إليها في المستقبل.

window.require عملت لي! شكرا يا شباب!

https://imgur.com/a/ekWwD

رسالة خطأ في المتصفح عندما حاولت ذلك

نسيت أن تعود nodeIntegration: false الذي يعطل حتى window.require().. . خطأ غبي. أتمنى أن يوفر هذا الشخص ساعة من البحث.

@ phil294 شكرا يا رجل! لقد وفرت حقًا ساعة من البحث.

مرحبًا micsel ،
لقد قمت بتضمين نافذة التصريح المستمر: أي ؛
لكنه يلقي خطأ نحوي.
اي افكار لماذا؟

نعم ، ضع نافذة إعلان const: أي ؛ في الجزء العلوي ، بعد مكان الواردات مباشرةً.

إذا حصلت على window.require ليست وظيفة وكنت تستخدم Angular-CLI ، فاستخدم ما يلي لإنشاء مثيل لواجهة Window:

./src/typings.d.ts

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

ثم يمكنك استخدام هذا لتضمين الإلكترون:
const { ipcRenderer } = window.require('electron');

إذا كنت تستخدم angular 2+ في تطبيق الإلكترون ، فاستورد lib "ngx-electron" واستخدمه في any.componets.ts

import { ElectronService } from 'ngx-electron';

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

أنا أستخدم رد فعل js مع الإلكترون وعندما أقوم بتشغيل هذا السطر في المحطة الطرفية ، ابدأ تشغيل الخيط ، فإنه يوفر لي خطأ Uncaught Type Error: window.require ليس دالة أنا لا أستخدم الكتابة المطبوعة كيف أعلن النافذة في React Js

الأشخاص الذين لا يزالون يواجهون المشكلة ، يقومون بطريقة ما بـ window.require() يفسد تناسق استخدام عبارات import عبر قاعدة الكود. بديل سهل هو تعيين webpack الخاص بك target إلى electron-renderer . إذا كنت تستخدم تطبيق Create React ، فقد يكون الإخراج بمثابة فوضى. ومن ثم ، يمكنك استخدام هذه الحزمة التي تقوم بربط حزمة الويب من أجلك ويمكنك استخدامها على سبيل المثال ، import fs from 'fs' في مكونات React (أو أي وحدة عقدة أخرى) ، لحسن الحظ في حياتك :)

في النوافذ التي تحتوي على Vue CLI 3 ، سيعمل window.require ولكنه يتطلب مسارًا كاملاً بدلاً من مسار نسبي من "node_modules /".

ولكن على غرار حالة React ، يمكن تكوين webpack بشكل صحيح لـ Vue عن طريق تحرير vue.config.js. ستعمل كلمة "تتطلب" كما هو متوقع.

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 من window.require وبدأت الأمور تعمل مرة أخرى. آمل أن يساعد هذا شخصًا آخر.

cperthuis أريد فقط أن أقول شكرا لك !! ههههه أنا لا أستخدم Vue حتى ، لكن التفكير المنطقي قادني إلى اكتشاف أنه يمكنني تغيير webpack.config.js الخاص بي للحصول على خاصية مستهدفة :)

عملت مثل السحر.

مرحبا،

يعمل window.require في بيئة خادم محلي مطور ولكنه لا يعمل في بيئة prod بعد إنشاء تطبيق React على ملف HTML مصغر.

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 ، لقد نجح الإصلاح الخاص بك مع تطبيق CRA الذي لم يتم إخراجه باستخدام "رد فعل التطبيق المعاد توصيله". شكرا لكم.

باستخدام Create-React-App 2 ، يمكنك استخدام الوحدة النمطية craco npm:

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

قم بتغيير react-scripts بمقدار craco في الحزمة الخاصة بك. json

craco.config.js

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

وستتمكن من الوصول إلى سياق الإلكترون الخاص بك من هذا القبيل:

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

@ Maxou44 شكرا على النصيحة حول الكراكو والإلكترون. هذا فقط ما احتاجه. في حال أي شخص يبحث عن مثال ...

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 .

هل هناك أي اقتراح حول كيفية إصلاح هذا. أنا أستخدم browserify على العقدة js.

لأي شخص لا يزال عالقًا في هذا الأمر: ستحصل على الخطأ window.require is not a function ما لم تعلن صراحة أن nodeIntergation هو true عندما تعلن عن 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 ومنشئو رد الفعل-التطبيق-تم إعادة توصيله .

محدث:
في الواقع الإصدار الثاني من كيفية فعل الشيء نفسه: 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 وليس العكس

لما؟

_ لا أريد إضافة هذا تقريبًا ولكنه سيوفر لي ساعة أو ساعتين من تصحيح الأخطاء ._

اضطررت إلى rm -rf node_modules && npm install لإصلاح هذه المشكلة. تمكنت بعد ذلك من إزالة window من window.require وبدأت الأمور تعمل مرة أخرى. آمل أن يساعد هذا شخصًا آخر.

رائع .. حاولت إجراء كل شيء في سلسلة الرسائل هذه وفقدت إعادة العرض نظرًا لعدم وجود تصويتات مؤيدة .. ما زلت حصلت على window is not a function ..
إزالة وإعادة تثبيت node_modules وعمله.

ملاحظة: ما زلت بحاجة إلى القيام بكل الحلول ولكن إذا فعلت كل شيء
ولا يزال هو نفسه إعادة تثبيت node_modules

لقد أنقذت يومي @ joshuapinter !

باستخدام رد الفعل-إنشاء-التطبيق وجدت نفس الأخطاء.
كان الحل حتى الآن:
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 ومنشئو رد الفعل-التطبيق-تم إعادة توصيله .

محدث:
في الواقع الإصدار الثاني من كيفية فعل الشيء نفسه: 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 :
`` جافا سكريبت
import React، {useEffect، useState} من 'رد فعل'؛
استيراد "./App.css" ؛

const ipcRenderer = window.require ('إلكترون'). 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>
);

}

تصدير التطبيق الافتراضي ؛
""

متغير Mainwindow على Main.js :
`` جافا سكريبت
// إنشاء نافذة المتصفح.
mainWindow = متصفح جديد ({
AlwaysOnTop: صحيح ،
الإطار: خطأ ،
ملء الشاشة: خطأ ،
شفاف: صحيح ،
titleBarStyle: "customButtonsOnHover" ،
عرض: خطأ ،
العرض: 300 ،
الارتفاع: 350 ،
تفضيلات الويب: {
العقدة التكامل: صحيح ،
التحميل المسبق: __dirname + '/preload.js'
}
}) ؛

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

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

ما الذي أفتقده؟

لذا ، تم حل المشكلة. أجيب بنفسي لأنه ربما يمكن لشخص ما الاستفادة منه (لقد علقت لساعات). إذا كان لديك ملف Preload.js ، فلن تحتاج إلى الاتصال بـ window.require('electron').ipcRenderer مرة أخرى من Àpp.js (العارض) ؛ يمكنك استدعاء المتغير مباشرة كـ window.ipcRenderer مثل هذا:

App.js :

جافا سكريبت
import 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>
);

}

تصدير التطبيق الافتراضي ؛
""

متغير Mainwindow على 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 غير محدد). تجاهله. ستعمل النافذة التي تم إنشاؤها بواسطة عملية الإلكترون (التطبيق الرئيسي) بشكل جيد.

باستخدام Create-React-App 2 ، يمكنك استخدام الوحدة النمطية craco npm:

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

قم بتغيير react-scripts بمقدار craco في الحزمة الخاصة بك. json

craco.config.js

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

واجهت المشاكل بينما require("fs") بالإضافة إلى window.require("fs") . بفضل @ Maxou44 لتقديم CRACO في هذه المناقشة.

لحل المشكلة ، أجريت 3 تغييرات في مشروعي:

1. تم استخدام CRACO على النحو الذي اقترحه @ Maxou44.
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")

راجع git repo بواسطة wwlib لمزيد من التوضيح https://github.com/wwlib/cra-craco-electron-example

قرأت سلسلة كاملة من أعلى إلى أسفل ولم ينجح شيء.
باستثناء طريقة Saroopashree أعلاه. شكرا Saroopashree لتقاسم الحل.
أعتقد أنه منذ أن تغير التفاعل و webpack إلى حد ما منذ بداية الموضوع ، فإن الحلول المذكورة أعلاه عفا عليها الزمن. قد أكون مخطئا بالطبع ولكن استخدام الطريقة المذكورة أعلاه نجح.
وهذا هو ما فعلته:

1. ركض npm install craco -D
2. قم بإنشاء ملف التكوين craco.config.js ولصق الكود التالي
   module.exports = { webpack: { configure: { target: 'electron-renderer' } } };
3. تم التحديث new BrowserWindow({ width: 1200, height: 800, webPreferences: { nodeIntegration: true } }) في main.js. طبعا مع اختلاف العرض والارتفاع.
4. Ran npm start لبدء خادم التطوير لتطبيق التفاعل الذي تم إنشاؤه باستخدام تطبيق create-reaction. أدى هذا إلى فتح علامة تبويب بها نفس الأخطاء. وشعرت بالتعب مرة أخرى.
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

الحل من راندي فيندلي:
الآن ، إذا كنت بحاجة إلى الوصول إلى الوحدة النمطية 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 مع الكتابة النصية والإلكترون. ثم الأمر هو أنني أعلنت عن تفضيلات الويب مثل هذا:

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

بحيث يبدو أن هذا قد تم استبداله / إعداد nodeIntegration إلى false ، لذا فإن تعيينه على true وإعادة تشغيل التطبيق أدى إلى حل المشكلة (عليك إعادة تشغيل التطبيق من أجل تحميل نافذة Electron بهذا التكوين)

وضع nodeIntegration على صحيح مثل هذا

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

لأي شخص لا يزال عالقًا في هذا الأمر: ستحصل على الخطأ window.require is not a function ما لم تعلن صراحة أن nodeIntergation هو true عندما تعلن عن BrowserWindow :

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

رد فعل التطبيق - تجديدها

كان هذا هو الحل الوحيد الجيد الذي وجدته من حيث قابلية التوسع ، ولا أعتقد أن أي شخص يجب أن يعتمد على window.require

لماذا قد لا يكون window.require قابلاً للتطوير؟

لأي شخص يصادف أنه يعاني من هذه المشكلة أو ما شابهها ويستخدم Vue و vue-electron-builder ، انظر هنا

بالنسبة لأي شخص لا يزال يعاني من هذا خاصة فيما يتعلق بإنهاء تطبيق الإلكترون من خلال زر رد فعل ، يرجى القراءة.

ما ساعدني هو ما يلي:

1. عندما تعلن عن نافذتك ، تأكد من تعيين nodeIntegration: true لأن هذا هو افتراضيًا false لأسباب أمنية. عادة ما يتم ذلك في ملف electron.js الخاص بك.

2. كما ذكر packetstracer بالفعل: _ يجب عليك إعادة تشغيل التطبيق من أجل تحميل نافذة Electron مع هذا config_

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" _- أضف بيان 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 كيفية الإكمال التلقائي لواجهة برمجة تطبيقات الإلكترون.

timsamart إنه يعمل. شكرا لك ، إنه يوفر لي أيام العمل. 🤣

بعد قضاء ساعات عديدة في محاولة كل شيء أعلاه حرفيًا ، فاتني الجزء في حالة استخدام BrowserView ، تمامًا مثل BrowserWindow تحتاج إلى تمكين node.js صراحة:

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

[email protected]