Electron: Requerir un electrón fuera de main.js provoca un TypeError

index.js: 4 TypeError no detectado: fs.readFileSync no es una función

¿Puede incluir la línea 4 de index.js aquí? ¿O un seguimiento de pila más completo?

Creo que se refiere a index.js de electron, que a su vez está ubicado en los módulos de nodo del proyecto. Aquí está el contenido de este archivo:

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

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

Todo el seguimiento de la pila sugiere un conflicto con React.js:

¿Qué sucede si ejecuta require('fs').readFileSync desde la pestaña Consola de las herramientas de desarrollo?

Parece que el módulo de nodo electron-prebuilt (el archivo que pegó) está terminando en su aplicación empaquetada, lo que no creo que desee, ya que debería usar el requisito incorporado de electron en su lugar.

@nukeop ¿Cómo estás lanzando tu aplicación? Su script `start debería verse como.

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

Tengo la sensación de que está intentando ejecutar su main.js con el nodo

node main.js

que no funcionará

¿Qué sucede si ejecuta require('fs').readFileSync desde la pestaña Consola de las herramientas de desarrollo?

Inmediatamente después de que se lanza este error, puedo ejecutar require('fs').existsSync en la consola para imprimir una definición de la función. También funciona antes del error.

Parece que el módulo de nodo preconstruido de electrones (el archivo que pegó) está terminando en su aplicación empaquetada, lo que no creo que desee, ya que debería usar el requisito de electrones incorporado en su lugar.

Tengo una instancia de Watchify ejecutándose en segundo plano mientras desarrollo y actualiza continuamente mi paquete. Lo definí en la sección de scripts de package.json así:

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

¿Algún consejo para evitar la agrupación electron-prebuilt ?

Los soportes de @nukeop Electron requieren internamente, por lo que no necesita usar browserify.

Que yo sepa, si quisiera usar browserify, debe excluir "electron".

Interesante, ¿podría ser que watchify/browserify esté arruinando esto? Ha funcionado bien hasta ahora.

Ahora no estoy seguro de cómo ejecutar el programa sin él.

Literalmente solo corre

electron .

Desde la carpeta principal de su aplicación, no necesita agrupar nada cuando usa Electron, ya que tiene un entorno de nodo completo internamente.

_Voy a cerrar esto ya que es un problema de Browserify_

Eso es lo que he estado haciendo todo el tiempo, empaquetar el programa en un solo archivo .js, que se incluye en un archivo html simple con:

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

Y todo funciona, excepto cuando uso require. Este es un problema con la interacción entre los dos módulos.

Si no empaqueto todo el programa en un paquete, no tengo una manera fácil de ejecutarlo, ya que mi main.js solo inicia electron y carga el archivo html que incluye el paquete.

@nukeop El proceso de renderizado dentro de Electron también tiene acceso a un entorno completo de nodo/commonjs, por lo que no necesita agrupar nada.

Si no empaqueto todo el programa en un paquete, no tengo una manera fácil de ejecutarlo, ya que mi main.js solo inicia electron y carga el archivo html que incluye el paquete.

No estoy seguro de entender aquí, cualquier secuencia de comandos que cargue en su archivo HTML tiene un entorno commonjs completo y, por lo tanto, puede usar require para cargar archivos adicionales sin buscar nada

Para cualquiera que encuentre este problema en el futuro y lea este hilo, usar window.require en lugar de require es una posibilidad de evitar el conflicto entre la función require de electron y browserify.

FWIW, me encontré con el mismo problema al intentar usar electrones en el proceso de renderizado con la aplicación create-react que usa webpack en el backend en lugar de browserify. window.require parece resolverlo también para mí, aunque no tengo del todo claro por qué.

Editar : descubrí por qué :-) Queremos require electron durante el tiempo de ejecución desde el entorno nodejs proporcionado en el tiempo de ejecución en lugar del entorno nodejs utilizado durante la compilación por webpack. De forma predeterminada, los globales están vinculados a window y la compilación del paquete web ignora el window global; por lo tanto, window.require funciona.

Otra forma de decirle a webpack que ignore un nombre global es usar un comentario como /*global Android*/ en el archivo JS. En otro proyecto que utiliza la aplicación creada por CRA en un Android WebView, utilicé lo anterior para obtener acceso a un objeto Java expuesto a JS a través de la interfaz de JavaScript proporcionada por Webview.

@nukeop - gracias por tu última publicación; Me ayudó mucho. window.require funcionó para mí.

Sí, arreglé mi problema de crear la aplicación reaccionar/paquete web.
cambio

import electron, { ipcRenderer } from 'electron'

a

const electron = window.require("electron")

@srinathh , ¿cómo está exponiendo/cargando su aplicación CRA como renderizador en su principal? ¿Estás construyendo primero (y modificando las rutas de recursos estáticos html)?

Sí, mi flujo de trabajo actualmente es básicamente ejecutar npm run build usando los scripts de CRA y luego ejecutar la salida en la carpeta build con electron. No necesita modificar las rutas de recursos estáticos a mano. En package.json para los scripts de CRA, solo necesita configurar homepage esta manera y las rutas se configurarán correctamente.

    "homepage": "./"

Además, tengo main.js y package.json para la aplicación electrónica en la carpeta public . Entonces, ejecutar la compilación los copia automáticamente y puede ejecutar electron build/ para iniciar su aplicación.

De hecho, me gustaría poder hacer npm start con electrones para el desarrollo, pero no me he dado cuenta de cómo hacerlo funcionar. Supongo que tendré que hacer un eject y modificar el script a mano.

Si desea ver un ejemplo de la configuración, eche un vistazo a https://github.com/srinathh/snippetfu

No estoy usando Electron, sino Node-Webkit (nw.js).
Usar window.require también solucionó mi problema. ¡Muchas gracias por todo!

@nukeop window.require también funcionó para mí, ¡muchas gracias! 🎉

@nukeop Recibí el mismo error, pero se resolvió window.requiere truco, ¡muchas gracias!

window.require resolvió el problema de fs.existsSync is not a function pero generó otro error: window.require no es una función. ¿Cómo lo resolveré?

@ steric85 ¿estás usando browserify, babel o webpack? es posible que necesite transpilar su código

@Alxmerino estoy usando webpack.

Asegúrate de compilar tu código.

@ steric85 , enfrenté el window.require is not a function en mecanografiado, logré solucionarlo de esta manera:

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

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

Estoy usando el método anterior para acceder a ipcRenderer desde electron en mi aplicación Angular, pero la detección de cambios angulares no funciona cuando actualizo un Observable usando un controlador de mensajes ipcRenderer.
¿Es porque Angular no sabe que ipcRenderer es un EventEmitter y que necesita ejecutar la detección de cambios cuando entran los eventos de ipcRenderer?

en Angular 2 solía llamar a applicationRef.tick() para decirle explícitamente a angular que actualice su estado. https://angular.io/api/core/ApplicationRef

Me enfrento a un problema muy similar al de @nukeop y @srinathh : configuré mi proyecto Electron + React + Webpack siguiendo esta guía de artículos , donde el autor al final menciona el truco con window.require . Solo require('electron') dos lugares en mi proyecto; en el punto de entrada para Electron, y en una clase de controlador de JavaScript que requieren algunos componentes de React. En mi archivo de punto de entrada de Electron, simplemente hago const electron = require('electron'); , ya que debería estar ejecutándose en el proceso principal (¿no?), y en mi clase de controlador hago const Electron = window.require('electron').remote; seguido de const Jsonfile = Electron.require('jsonfile'); , que debería ser la forma de hacerlo, ya que se está ejecutando en el proceso del renderizador. Pero recibo el mismo error que @nukeop ("TypeError: fs.ExistsSync no es una función") en la línea seis en node_modules/electron/index.js que se ve así:

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

Intenté eliminar node_modules/electron e instalar nuevamente.
Estoy usando Electron 1.7.5 en macOS 10.12.6 y comienzo mi proyecto usando npm run dev como configuración en el artículo.

Actualizar; Encontré el require que causó mi error, intenté hacer require('electron-react-devtools') en mi React index.js. Cambiarlo a const ReactDevtools = Electron.require('electron-react-devtools'); detuvo los errores, pero ahora parece que no puedo llamar a .inject() en la instancia de ReactDevtools ("no es una función"), pero eso podría no ser algo para discutir aquí .

@ steric85 Es porque ejecuta la aplicación en el entorno de la página web => debe ejecutar la aplicación en el entorno Electron (entorno Nodejs)

• require('electron') => Webpack empaquetará el módulo de electrones en bundle.js => electron use fs module => Webpack no entiende
• window.require('electron') => Webpack ignorará la función require
• En el entorno de la página web, window.require no estará definido
• En el entorno nodejs, window.require funcionará
  => Abra su aplicación en la ventana Electron (no en la ventana del navegador como Chrome, Firefox, etc.

Todavía recibo window.require is not a function . Estoy usando Electron con React Starter Kit (https://github.com/kriasoft/react-starter-kit). Todo funciona bien, excepto esto.

Configuré mi aplicación Electron para cargar mi aplicación desde la web, por lo que la aplicación no se ejecuta localmente:
https://gist.github.com/holgersindbaek/68f6db82f507967a51ca75c527faeff6

Lo que intento hacer es llamar a ipcRenderer en uno de mis archivos React. Sin embargo, no estoy seguro de si es posible cuando mi aplicación se carga desde la web. ¿Alguna sugerencia?

@holgersindbaek No debe ver su aplicación en un navegador como Chrome, Firefox, etc. No funcionará porque es el entorno de la página web.
Deberías ver tu aplicación en una ventana de Electron.

Lo estoy, pero estoy usando Electron de alguna manera, donde estoy cargando mi aplicación desde el sitio web en cada lanzamiento. Esencialmente, estoy mostrando un sitio web en mi aplicación de electrones. Consulte el archivo anterior. ¡¿Solo quiero asegurarme de que realmente no hay nada que pueda hacer?!

Electron puede cargar cualquier URL. Para cargar una URL, debe usar esta función mainWindow.loadURL (url)
=> En la vista de la ventana de electrones, el código javascript de la URL puede acceder a require, ipc, etc.

Está bien. Intentaré eso.

window.require en electrones no funcionó, pero window.require para fs sí.

No estoy seguro de por qué. Pero está funcionando y dado que es un pequeño proyecto personal, no voy a insistir.

Gracias @nukeop

Hola, este es mi paquete.json, estoy usando un paquete web, ninguno de estos resolvió mi problema, ¿alguien tiene una solución? Después de usar window.require, recibí el error "la ventana no está definida"

'uso estricto';

var electron = require('electron')
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;
var ventana principal = nulo;

app.on('listo', function() {
mainWindow = new BrowserWindow({ancho: 800, alto: 600});

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

mainWindow.webContents.openDevTools();

});

Estoy usando mecanografiado y tuve que usar

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

para que mi renderer se comunique con mi main. Espero que esto ayude a alguien.

Esto funcionó para mí.
Por ejemplo, si desea solicitar un control remoto, entonces

declarar const ventana: cualquiera;
const { remoto } = ventana.require('electron');

Hola, gracias hombre.

El domingo 3 de diciembre de 2017 a las 21:29, Michael - ሚካኤል ሰልጠነ <
[email protected]> escribió:

Esto funcionó para mí.
Por ejemplo, si desea solicitar un control remoto, entonces

declarar const ventana: cualquiera;
const { remoto } = ventana.require('electron');

—
Estás recibiendo esto porque comentaste.
Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/electron/electron/issues/7300#issuecomment-348801405 ,
o silenciar el hilo
https://github.com/notifications/unsubscribe-auth/ARDyd4c3aOkMbb058xklujMMbnmaoxKGks5s8uGVgaJpZM4KDU6t
.

@solominh Gracias por tus explicaciones aquí . Sin embargo, tengo una configuración similar a la de @holgersindbaek , ¿qué entorno es un script de precarga en una vista web?

Información:

• Mi entrada de electrones ejecuta mainWindow.loadURL(url) , donde url es un index.html local
• Este index.html tiene un <webview>
• La vista web tiene un campo preload que carga inject.js, y este script ejecuta window.require('electron').

Observaciones:

• Si uso const electron = require('electron') , tengo el error fs.readFileSync is not a function
• Si uso const electron = window.require('electron') , tengo el error window.require is not a function .
• inject.js se incluye a través del paquete web (puede pegar la configuración si es relevante).

EDITAR: Resuelto para mí usando <webview nodeintegration="true"> y window.require. Dejar nota aquí para futuras referencias.

¡window.require funcionó para mí! ¡Gracias chicos!

https://imgur.com/a/ekWwD

mensaje de error en el navegador cuando probé esto

Olvidé revertir nodeIntegration: false que deshabilita incluso window.require().. . estúpido error. Espero que esto le ahorre a alguien una hora de investigación.

@ phil294 ¡Gracias, amigo! Realmente ahorraste una hora de investigación.

Hola @micsel ,
Incluí la ventana declare const: any;
pero está arrojando un error de sintaxis.
¿Alguna idea de por qué?

Ya, pon la ventana declare const: any; en la parte superior, justo después de donde están las importaciones.

Si obtiene window.require no es una función y está utilizando Angular-CLI, use lo siguiente para crear una instancia de la interfaz de Windows:

./src/typings.d.ts

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

Entonces puedes usar esto para incluir electrones:
const { ipcRenderer } = window.require('electron');

si está utilizando angular 2+ en la aplicación de electrones, importe la biblioteca "ngx-electron" y utilícela en any.componets.ts

import { ElectronService } from 'ngx-electron';

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

Estoy usando react js con electron y cuando ejecuto esta línea en el inicio de ejecución de hilo terminal, me proporciona un error Error de tipo no detectado: window.require no es una función , no estoy usando mecanografiado cómo declarar la ventana en React Js

Las personas que todavía enfrentan el problema, de alguna manera hacer window.require() estropean la consistencia del uso de instrucciones import en todo el código base. Una alternativa fácil es configurar su paquete web target a electron-renderer . Si usa Create React App , expulsar puede ser un desastre. Por lo tanto, puede usar este paquete que conecta el paquete web por usted y puede usar, por ejemplo, import fs from 'fs' en sus componentes React (o cualquier otro módulo de nodo), felizmente en su vida :)

En Windows con Vue CLI 3, window.require funcionará pero requerirá una ruta completa en lugar de una ruta relativa de "node_modules/".

Pero similar al caso de React, el paquete web se puede configurar correctamente para Vue editando vue.config.js. "requerir" funcionará como se esperaba.

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 (esto es solo un ejemplo, funcionaría en cualquier otro archivo vue js)

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

_Casi no quiero agregar esto, pero me hubiera ahorrado una o dos horas de depuración._

Tuve que rm -rf node_modules && npm install para solucionar este problema. Luego pude eliminar el window de window.require y las cosas empezaron a funcionar de nuevo. Esperemos que eso ayude a alguien más.

@cperthuis Solo quiero decir GRACIAS!! Jaja, ni siquiera estoy usando Vue, pero el pensamiento lógico me llevó a darme cuenta de que puedo cambiar mi webpack.config.js para tener una propiedad de destino :)

TRABAJADO COMO UN ENCANTO.

Hola,

window.require funciona en un entorno de servidor local de desarrollo, pero no en un entorno de producción después de compilar la aplicación React en un archivo HTML minimizado.

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')}`)
}

Funciona con localhost:3000 pero no con file://${path.join(__dirname, 'build/index.html')}

https://imgur.com/EE7jxZq

@cperthuis , su solución funcionó para la aplicación CRA no expulsada usando 'react-app-rewired'. gracias.

Con Create-React-App 2, puede usar el módulo craco npm:

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

Cambie react-scripts por craco en su paquete.json

craco.config.js

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

Y tendrás acceso a tu contexto de Electron así:

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

@Maxou44 gracias por el consejo sobre craco y electron. Es justo lo que necesitaba. Por si alguien busca un ejemplo...

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

@wwlib No hay problema, feliz de ver que te ayudó 🥳

Olvidé revertir nodeIntegration: false que deshabilita incluso window.require().. . estúpido error. Espero que esto le ahorre a alguien una hora de investigación.

Muchas gracias.

Tenga en cuenta que si está cargando contenido remoto, es importante establecer nodeIntegration en falso: https://electronjs.org/docs/tutorial/security#2 -disable-nodejs-integration-for-remote -contenido

Hola,
Estoy teniendo el mismo error. Al usar window.require, el error Uncaught TypeError: fs.readFileSync is not a function está solucionado, pero se me ocurrió otro error Uncaught TypeError: window.require is not a function .

¿Hay alguna sugerencia sobre cómo solucionar esto? Estoy usando browserify en el nodo js.

Para cualquiera que todavía esté atascado en esto: obtendrá el error window.require is not a function a menos que declare explícitamente nodeIntergation como true cuando declare su BrowserWindow :

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

La única solución lo suficientemente buena que encontré es la siguiente:

1. instalar como dependencia de desarrollo react-app-rewired paquete
2. Use este módulo para inyectar la configuración personalizada de Webpack sin eject -ing el CRA:

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

1. y agregue el archivo config-overrides.js con el contenido correspondiente:

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

Gracias a: comentario de @Lilanga, comentario de @agrublev y creadores de react-app-rewired .

Actualizado:
En realidad, la segunda versión de cómo hacer lo mismo: https://www.codementor.io/randyfindley/how-to-build-an-electron-app-using-create-react-app-and-electron-builder-ss1k0sfer

Actualizado2:
@nukeop Eliminé algunas declaraciones engañosas debido a la falta de tiempo para seguir los debates sobre por qué no usar Browserify o por qué usarlo y no puedo escribir ahora una explicación detallada de lo que quise decir. Pero mantendré mi opinión personal con respecto a que "simplemente use window.require resolverá el problema" parece muy poco confiable.

Incorrecto como?

Es una aplicación React que debe ejecutarse dentro del entorno Electron y no al revés.

¿Qué?

_Casi no quiero agregar esto, pero me hubiera ahorrado una o dos horas de depuración._

Tuve que rm -rf node_modules && npm install para solucionar este problema. Luego pude eliminar el window de window.require y las cosas empezaron a funcionar de nuevo. Esperemos que eso ayude a alguien más.

Guau... Intenté TODO en este hilo y me perdí la repetición porque no hubo votos a favor... Todavía obtuve window is not a function ...
eliminado y reinstalado node_modules y está funcionando.

PD: aun te falta hacer todas las soluciones pero si hiciste todo
y sigue igual reinstalar node_modules

¡Me salvaste el día @joshuapinter !

Usando react-create-app encontré los mismos errores.
La solución hasta ahora era:
const electron = window.require("electron") en la parte electrónica BrowserWindow agregue nodeIntegration:true de la siguiente manera.
mainWindow = new BrowserWindow({ width: 900, height: 680, webPreferences: { webSecurity: false, nodeIntegration: true } });

La única solución lo suficientemente buena que encontré es la siguiente:

1. instalar como dependencia de desarrollo react-app-rewired paquete
2. Use este módulo para inyectar la configuración personalizada de Webpack sin eject -ing el CRA:

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

1. y agregue el archivo config-overrides.js con el contenido correspondiente:

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

Gracias a: comentario de @Lilanga, comentario de @agrublev y creadores de react-app-rewired .

Actualizado:
En realidad, la segunda versión de cómo hacer lo mismo: https://www.codementor.io/randyfindley/how-to-build-an-electron-app-using-create-react-app-and-electron-builder-ss1k0sfer

Actualizado2:
@nukeop Eliminé algunas declaraciones engañosas debido a la falta de tiempo para seguir los debates sobre por qué no usar Browserify o por qué usarlo y no puedo escribir ahora una explicación detallada de lo que quise decir. Pero mantendré mi opinión personal con respecto a que "simplemente use window.require resolverá el problema" parece muy poco confiable.

Esto funcionó para mí. Gracias

El problema con window.require es que solo funciona para el paquete de nivel superior.
por ejemplo, si estoy usando fs directamente, funciona. Pero si estoy usando un paquete que depende de fs , todavía recibo una excepción.

window.require no me funciona cuando llamo a la función dentro de la aplicación React. Obtuve "TypeError: window.require no es una función".

App.js :
```javascript
import React, { useEffect, useState } from 'react';
importar './Aplicación.css';

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

aplicación de función () {

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>
);

}

exportar la aplicación predeterminada;
````

Variable de ventana principal en Main.js :
```javascript
// Crea la ventana del navegador.
ventana principal = nueva ventana del navegador ({
siempre en la parte superior: cierto,
marco: falso,
pantalla completa: falso,
transparente: cierto,
titleBarStyle: 'customButtonsOnHover',
mostrar: falso,
ancho: 300,
altura: 350,
Preferencias web: {
nodeIntegration: verdadero,
precarga: __dirname + '/preload.js'
}
});

``` ** Precargar.js`**:

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

¿Qué me estoy perdiendo?

Entonces, problema resuelto. Me respondo a mí mismo porque tal vez alguien pueda beneficiarse de ello (me quedé horas). Si tiene un archivo Preload.js , no necesita volver a llamar a window.require('electron').ipcRenderer desde el Àpp.js (procesador); llamas directamente a la variable como window.ipcRenderer así:

App.js :

````javascript
import React, { useEffect, useState } from 'react';
importar './Aplicación.css';

aplicación de función () {

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>
);

}

exportar la aplicación predeterminada;
````

Variable de ventana principal en 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;

Después de ejecutar la aplicación desde la línea de comandos, la ventana generada por el proceso React arrojará un error (ipcRenderer no está definido). Ignoralo. La ventana generada por el proceso Electron (aplicación principal) funcionará bien.

Con Create-React-App 2, puede usar el módulo craco npm:

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

Cambie react-scripts por craco en su paquete.json

craco.config.js

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

Tuve los problemas mientras require("fs") y window.require("fs") . Gracias a @Maxou44 por presentar a CRACO en esta discusión.

Para resolver el problema, hice 3 cambios en mi proyecto:

1. Usé CRACO como lo sugirió @ Maxou44.
2. En public/main.js (algunos podrían haber llamado este archivo como electron.js), cambiado
   new BrowserWindow({ width: 1200, height: 800 })
   a
   new BrowserWindow({ width: 1200, height: 800, webPreferences: { nodeIntegration: true } })
3. Reemplazo const fs = require("fs") a const fs = require("electron").remote.require("fs")

Consulte este repositorio de git de @wwlib para obtener más aclaraciones https://github.com/wwlib/cra-craco-electron-example

Leí todo el hilo de arriba a abajo y nada funcionó.
EXCEPTO, el método de @Saroopashree anterior. Gracias @Saroopashree por compartir la solución.
Supongo que dado que react y webpack han cambiado un poco desde el comienzo del hilo, las soluciones anteriores están obsoletas. Puedo estar equivocado, por supuesto, pero usar el método anterior funcionó.
Esto es lo que hice:

1. Corrió npm install craco -D
2. Cree el archivo de configuración craco.config.js y pegue el siguiente código
   module.exports = { webpack: { configure: { target: 'electron-renderer' } } };
3. Actualizado new BrowserWindow({ width: 1200, height: 800, webPreferences: { nodeIntegration: true } }) en main.js. Por supuesto con diferente ancho y alto.
4. Ejecutó npm start para iniciar el servidor de desarrollo para la aplicación de reacción creada con create-react-app. Esto abrió una pestaña con los mismos errores. Y me sentí cansado de nuevo.
5. Corrió npm run electron para ejecutar la aplicación de electrones.
   Y viola!!! Pude ver la página.

Así que gracias @Saroopashree.

Si está tratando de acceder a 'electrón' o su otro componente dentro de un componente/clase de reacción, intente esto: #336757899

Gracias a @tumbledwyer por publicar el enlace a una solución que funciona para mí:

Actualizado:
En realidad, la segunda versión de cómo hacer lo mismo: https://www.codementor.io/randyfindley/how-to-build-an-electron-app-using-create-react-app-and-electron-builder-ss1k0sfer

La solución de Randy Findley:
Ahora, si necesita acceder al módulo fs como lo hice yo, encontrará rápidamente el error Module not found

Primero, instale Rescripts .

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

Luego, cambie las etiquetas de scripts en package.json de esto...

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

a esto

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

Ahora agregue un nuevo archivo llamado .rescriptsrc.js con los siguientes contenidos:

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

Finalmente agregue otro nuevo archivo llamado .webpack.config.js con los siguientes contenidos:

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

Ahora puedes usar el módulo fs , no te preocupes.

Lo que señaló @ledleds funcionó para mí, usando CRA con typscript y Electron. Entonces la cosa es que declaré webPreferences así:

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

por lo que parece estar sobrescribiendo/configurando nodeIntegration en falso, por lo que establecerlo en verdadero y reiniciar la aplicación resolvió el problema (debe reiniciar la aplicación para cargar la ventana de Electron con esa configuración)

establecer nodeIntegration en verdadero así

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

Para cualquiera que todavía esté atascado en esto: obtendrá el error window.require is not a function a menos que declare explícitamente nodeIntergation como true cuando declare su BrowserWindow :

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

reaccionar-aplicación-recableado

Esta fue la única solución buena que encontré en términos de escalabilidad, no creo que nadie deba confiar en window.require

¿Por qué window.require no sería escalable?

Para cualquier persona que tenga problemas con este u otros problemas similares y esté usando Vue y vue-electron-builder, consulte aquí

Para cualquiera que todavía tenga problemas con esto, especialmente con respecto a salir de la aplicación de electrones a través de un botón de reacción, siga leyendo.

Lo que me ayudó fue lo siguiente:

1. Cuando declare su ventana, asegúrese de configurar nodeIntegration: true ya que actualmente es false por defecto por razones de seguridad. Por lo general, eso se hace en su archivo electron.js .

2. Como @packetstracer ya mencionó: _tienes que reiniciar la aplicación para cargar la ventana Electron con esa configuración_

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

1. También en su electron.js coloque la siguiente declaración cerca de la parte superior, esto asegura que el ipcMain escuchará en el evento _"close-me"_:

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

1. En el componente de reacción donde se encuentra su botón _"cerrar"_, agregue la siguiente instrucción window.require después de sus importaciones. El habitual require no funcionó:

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

1. Y para poder cerrar tu aplicación llama al siguiente comunicado. Debería enviar el evento _"close-me"_ al ipcMain:

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

Siéntase libre de comentar y dar su opinión. Todavía soy nuevo en electron.
Sé que el contexto con el botón de salida no está relacionado, pero no pude encontrar un hilo más adecuado. Por favor, siéntase libre de señalarme otro hilo más adecuado si hay uno.

Mi configuración:

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

solucionado para mi!! Gracias @nukeop

`
`

¿Alguien sabe cómo configurar el tipo adecuado en mecanografiado?

tengo lo siguiente en este momento

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

me gustaría algo como

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

por lo que el IDE sabe cómo autocompletar la API de electrones.

@timsamart funciona. Gracias, me ahorra días de trabajo. 🤣

Después de pasar muchas horas intentando literalmente todo lo anterior, me perdí la parte en caso de que use BrowserView , al igual que BrowserWindow , necesita habilitar explícitamente node.js:

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

[email protected]