Electron: main.js 외부에 전자가 필요하면 TypeError가 발생합니다.

index.js:4 잡히지 않은 TypeError: 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 require를 대신 사용해야 하기 때문에 원하지 않는 패키지 앱에서 끝나는 것 같습니다.

@nukeop 앱을 어떻게 런칭하고 있나요? `시작 스크립트는 다음과 같아야 합니다.

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

노드를 사용하여 main.js 를 실행하려고 시도하고 있다는 느낌이 듭니다.

node main.js

작동하지 않는 것

dev 도구의 콘솔 탭에서 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 지원은 내부적으로 필요하므로 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가 전자만 시작하고 번들을 포함하는 html 파일을 로드하므로 쉽게 실행할 수 없습니다.

HTML 파일에 로드하는 모든 스크립트에는 완전한 commonjs 환경이 있으므로 require 를 사용하여 브라우저화하지 않고도 추가 파일을 로드할 수 있습니다.

미래에 이 문제가 발생하고 이 스레드를 읽는 사람에게는 require 대신 window.require 를 사용하는 것이 전자와 browserify의 require 함수 간의 충돌을 피할 수 있는 한 가지 가능성입니다.

FWIW, 나는 브라우저화 대신 백엔드에서 웹팩을 사용하는 create-react-app과 함께 렌더러 프로세스에서 전자를 사용하려고 시도하는 것과 동일한 문제에 부딪쳤습니다. 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 나를 위해 일했습니다.

네, 반응 앱 생성/웹팩 문제를 수정했습니다.
변화

import electron, { ipcRenderer } from 'electron'

에게

const electron = window.require("electron")

@srinathh CRA 앱을 메인에서 렌더러로 어떻게 노출/로드하고 있습니까? 당신이 먼저 구축하고 있습니까 (그리고 html 정적 리소스 경로를 수정하고 있습니까)

예, 현재 내 작업 흐름은 기본적으로 CRA 스크립트를 사용하여 npm run build 를 실행한 다음 전자를 사용하여 build 폴더에서 출력을 실행하는 것입니다. 수동으로 정적 리소스 경로를 수정할 필요가 없습니다. package.json for CRA 스크립트에서 이렇게 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 웹팩 을 사용하고 있습니다.

코드를 컴파일하고 있는지 확인

@steric85 , 나는 typescript에서 window.require is not a function 에 직면했고 다음과 같이 수정했습니다.

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

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

내 Angular 앱의 전자에서 ipcRenderer에 액세스하기 위해 위의 방법을 사용하고 있지만 ipcRenderer 메시지 처리기를 사용하여 Observable을 업데이트할 때 각도 변경 감지가 작동하지 않습니다.
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는 함수가 아닙니다")과 동일한 오류가 발생합니다.

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은 전자 모듈을 bundle.js에 묶을 것입니다 => electron은 fs 모듈을 사용합니다 => Webpack은 이해하지 못합니다
• window.require('electron') => Webpack은 필수 기능을 무시합니다.
• 웹 페이지 환경에서 window.require는 정의되지 않습니다.
• nodejs 환경에서는 window.require가 작동합니다.
  => Electron 창에서 앱을 엽니다(Chrome, Firefox 등과 같은 브라우저 창이 아닌

나는 여전히 window.require is not a function 받고 있습니다. 저는 React Starter Kit(https://github.com/kriasoft/react-starter-kit)와 함께 Electron을 사용하고 있습니다. 이것을 제외하고는 모든 것이 잘 작동합니다.

웹에서 앱을 로드하도록 Electron 앱을 설정했으므로 앱이 로컬에서 실행되지 않습니다.
https://gist.github.com/holgersindbaek/68f6db82f507967a51ca75c527faeff6

내가하려는 것은 내 React 파일 중 하나에서 ipcRenderer 를 호출하는 것입니다. 내 앱이 웹에서 로드될 때도 가능한지 확실하지 않습니다. 어떤 제안?

@holgersindbaek 크롬, 파이어폭스 등의 브라우저에서 앱을 보면 안됩니다. 웹페이지 환경이기 때문에 동작하지 않습니다.
Electron 창에서 앱을 확인해야 합니다.

저는 그렇습니다. 하지만 어떤 식으로든 Electron을 사용하고 있습니다. 각 실행 시 웹사이트에서 앱을 로드하는 것입니다. 기본적으로 전자 앱에 웹사이트를 표시하고 있습니다. 위 파일을 참조하세요. 정말 내가 할 수 있는 일이 없는지 확인하고 싶을 뿐이야?!

Electron은 모든 URL을 로드할 수 있습니다. URL을 로드하려면 이 함수를 사용해야 합니다. mainWindow.loadURL(url)
=> 전자 창 보기에서 해당 URL 자바스크립트 코드는 require, ipc 등에 액세스할 수 있습니다.

확인. 나는 그것을 시도할 것이다.

전자의 window.require 는 작동하지 않았지만 window.require 에 대한 fs 는 작동했습니다.

이유는 확실하지 않습니다. 그러나 그것은 작동하고 있으며 작은 개인 프로젝트이기 때문에 문제를 푸시하지 않을 것입니다.

@nukeop 감사합니다

안녕하세요, 이것은 내 package.json입니다. 나는 webpack을 사용하고 있습니다. 이것들 중 어느 것도 내 문제를 해결하지 못했습니다. 아무도 해결책을 가지고 있습니까? window.require를 사용한 후 "window is not defined" 오류가 발생했습니다.

'엄격한 사용';

var 전자 = 필요('전자')
var 앱 = 전자.앱;
var BrowserWindow = 전자.BrowserWindow;
var 메인 창 = null;

app.on('준비', function() {
mainWindow = new BrowserWindow({너비: 800, 높이: 600});

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

mainWindow.webContents.openDevTools();

});

나는 typescript를 사용하고 있으며 사용해야했습니다.

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

내 렌더러가 내 메인과 통신하도록 합니다. 이것이 누군가를 돕기를 바랍니다.

이것은 나를 위해 일했습니다.
예를 들어 원격이 필요한 경우

const 창 선언: 모두;
const { 원격 } = window.require('전자');

안녕하세요, 감사합니다.

2017년 12월 3일 일요일 오후 9시 29분, Michael - ሚካኤል ሰልጠ
[email protected]>은 다음과 같이 썼습니다.

이것은 나를 위해 일했습니다.
예를 들어 원격이 필요한 경우

const 창 선언: 모두;
const { 원격 } = window.require('전자');

—
당신이 댓글을 달았기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 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에는 injection.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 오류가 발생합니다.
• injection.js는 webpack을 통해 번들로 제공됩니다(해당되는 경우 구성을 붙여넣을 수 있음).

편집: <webview nodeintegration="true"> 및 window.require를 사용하여 해결했습니다. 나중에 참조할 수 있도록 여기에 메모를 남깁니다.

window.require가 나를 위해 일했습니다! 고마워 얘들아!

https://imgur.com/a/ekWwD

내가 이것을 시도했을 때 브라우저의 오류 메시지

window.require().. 도 비활성화하는 nodeIntegration: false 되돌리는 것을 잊었습니다. 멍청한 실수. 누군가가 한 시간 동안 연구하는 데 도움이 되기를 바랍니다.

@phil294 고마워요! 조사하는 데 한 시간을 절약했습니다.

안녕하세요 @micsel 입니다 .
나는 선언 const 창을 포함했습니다.
그러나 구문 오류가 발생합니다.
어떤 아이디어가 있습니까?

예, 선언 const 창을 넣습니다. 상단, 수입품이 있는 바로 뒤에 있습니다.

window.require가 함수가 아니고 Angular-CLI를 사용하는 경우 다음을 사용하여 Window 인터페이스를 인스턴스화합니다.

./src/typings.d.ts

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

그런 다음 이것을 사용하여 전자를 포함할 수 있습니다.
const { ipcRenderer } = window.require('electron');

전자 앱에서 각도 2+를 사용하는 경우 "ngx-electron" lib를 가져와서 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 is not a function 내가 typescript를 사용하지 않습니다. 어떻게 React Js에서 창을 선언합니까?

여전히 문제에 직면하고 있는 사람들은 어떻게든 window.require() 를 수행하면 코드베이스 전체에서 import 문을 사용하는 일관성을 망칩니다. 쉬운 대안은 webpack target 을 electron-renderer 로 설정하는 것입니다. Create React App 을 사용하는 경우 꺼내기가 엉망이 될 수 있습니다. 따라서 웹팩 후킹을 수행하는 이 패키지를 사용할 수 있으며 예를 들어 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();

_나는 이것을 추가하고 싶지 않지만 디버깅하는 데 한두 시간을 절약할 수 있습니다._

이 문제를 해결하려면 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에서 craco react-scripts 변경

craco.config.js

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

그리고 다음과 같이 Electron 컨텍스트에 액세스할 수 있습니다.

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

@Maxou44 craco & electron에 대한 정보 감사합니다. 그것은 내가 필요로 한 것입니다. 누군가가 예를 찾고 있다면 ...

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

@wwlib 문제없습니다. 도움이 되셨다니 다행입니다 🥳

window.require().. 도 비활성화하는 nodeIntegration: false 되돌리는 것을 잊었습니다. 멍청한 실수. 누군가가 한 시간 동안 연구하는 데 도움이 되기를 바랍니다.

정말 고맙습니다.

원격 콘텐츠를 로드하는 경우 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 comment , @agrublev comment 및 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 및 작동을 제거하고 다시 설치했습니다.

추신: 여전히 모든 솔루션을 수행해야 하지만 모든 작업을 수행했다면
여전히 동일한 재설치 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 comment , @agrublev comment 및 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 :
```자바스크립트
'반응'에서 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>
);

}

기본 앱 내보내기;
````

Main.js 의 메인 창 변수:
```자바스크립트
// 브라우저 창을 생성합니다.
mainWindow = 새로운 BrowserWindow({
AlwaysOnTop: 사실,
프레임: 거짓,
전체 화면 가능: 거짓,
투명: 사실,
titleBarStyle: 'customButtonsOnHover',
표시: 거짓,
너비: 300,
키: 350,
웹 기본 설정: {
nodeIntegration: 참,
사전 로드: __dirname + '/preload.js'
}
});

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

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

내가 무엇을 놓치고 있습니까?

그래서, 문제가 해결되었습니다. 누군가가 혜택을 볼 수 있기 때문에 나는 스스로 대답합니다 (몇 시간 동안 붙어있었습니다). Preload.js 파일이 있으면 Àpp.js (렌더러)에서 window.require('electron').ipcRenderer 를 다시 호출할 필요가 없습니다. 다음과 같이 window.ipcRenderer 변수를 직접 호출합니다.

App.js :

````자바스크립트
'반응'에서 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에서 craco react-scripts 변경

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 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. npm start 를 실행하여 create-react-app을 사용하여 만든 반응 앱용 개발 서버를 시작했습니다. 이것은 동일한 오류가 있는 탭을 열었습니다. 그리고 나는 다시 피곤함을 느꼈다.
5. 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 가 지적한 것은 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,
    }
});

반응 앱 재연결

이것은 확장성 측면에서 내가 찾은 유일한 좋은 솔루션이었습니다. 아무도 window.require에 의존해야 한다고 생각하지 않습니다.

window.require를 확장할 수 없는 이유는 무엇입니까?

이 문제 또는 이와 유사한 문제로 어려움을 겪고 있고 Vue 및 vue-electron-builder를 사용하는 사람은 여기 를 참조하십시오.

반응 버튼을 통해 전자 응용 프로그램을 종료하는 것과 관련하여 여전히 이것으로 어려움을 겪고 있는 사람은 계속 읽으십시오.

저에게 도움이 된 것은 다음과 같습니다.

1. 창을 선언할 때 보안상의 이유로 현재 기본적으로 false nodeIntegration: true 를 설정했는지 확인하십시오. 일반적으로 electron.js 파일에서 수행됩니다.

2. @packetstracer 가 이미 언급했듯이: _해당 구성으로 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. _"닫기"_-버튼이 있는 반응 구성 요소에서 가져오기 후에 다음 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는 전자 API를 자동 완성하는 방법을 알고 있습니다.

@timsamart 작동합니다. 덕분에 작업 시간을 절약할 수 있습니다. 🤣

위의 모든 것을 문자 그대로 시도하는 데 많은 시간을 보낸 후에 BrowserView 를 사용하는 경우에 대비하여 $# BrowserWindow 처럼 node.js를 명시적으로 활성화해야 하는 부분을 놓쳤습니다.

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

[email protected]