Comments (10)
@kunokdev I see that using window.require("fs")
instead of using import
works, but all the TypeScript typing is missing. Is there a way to get the typing for node modules as well?
update this seems to work ok:
import * as FS from "fs";
const fs: typeof FS = window.require("fs");
or:
import { IpcRenderer } from 'electron'
const ipcRenderer: IpcRenderer = window.require('electron').ipcRenderer
from react-typescript-electron-sample-with-create-react-app-and-electron-builder.
@tudiantuan, thank you for the report. But, I don't find such a problem at all.
from react-typescript-electron-sample-with-create-react-app-and-electron-builder.
@yhirose this is common problem when trying to import ipcRenderer
into React code.
Seems like this repository doesn't handle/support ipc communication between renderer and main process.
from react-typescript-electron-sample-with-create-react-app-and-electron-builder.
@kunokdev, great! Could you show me the smallest possible code to reproduce it?
from react-typescript-electron-sample-with-create-react-app-and-electron-builder.
Steps to reproduce:
- Clone this repo
- Open any React file, e.g. App.tsx
- Try to import anything electron related
import { ipcRenderer } from "electron";
const App: React.FC = () => {
console.log(ipcRenderer);
This error appears:
Perhaps changing import to:
const ipcRenderer = window.require("electron").ipcRenderer;
could solve this problem.
from react-typescript-electron-sample-with-create-react-app-and-electron-builder.
@kunokdev, do you think if it's a problem related to this project, or a typical Electron issue which can happen in any Electron project?
from react-typescript-electron-sample-with-create-react-app-and-electron-builder.
I'd say It's caused by electron+cra(webpack) combo; Depends how you wanna look at it; this issue affects this repo; but this repo isn't the cause of the issue. You should probably add something in README or code example where renderer (React) process communicates with main (Electron) process.
from react-typescript-electron-sample-with-create-react-app-and-electron-builder.
To use node modules and code in react, the webpack target needs to be electron-renderer
.
CRA doesn't make it easy to modify webpack config, options are:
- eject
- add a preload script, and use
window.postMessage
in react code to send message to preload code, and use ipcRenderer from there. This is described in this article
from react-typescript-electron-sample-with-create-react-app-and-electron-builder.
To use node modules and code in react, the webpack target needs to be
electron-renderer
.CRA doesn't make it easy to modify webpack config, options are:
- eject
- add a preload script, and use
window.postMessage
in react code to send message to preload code, and use ipcRenderer from there. This is described in this article
I am successfully using ipcRenderer without ejecting or preload scripts
from react-typescript-electron-sample-with-create-react-app-and-electron-builder.
@stereosteve, window.require
is an ugly workaround.
There is a better fix:
electron/electron#7300 (comment)
from react-typescript-electron-sample-with-create-react-app-and-electron-builder.
Related Issues (13)
- Issue with electron:dev script. HOT 1
- `'BROWSER' is not recognized as an internal or external command` HOT 2
- build for apple m1 HOT 3
- package-lock.json resolves all dependencies to repo packages.bethel.jw.org HOT 2
- preload issue HOT 1
- Images inside electron/ are not copied over to build/ HOT 2
- How to use ipcRenderer and ipcMain? HOT 4
- error occurs after hot reload HOT 3
- What is the https://packages.bethel.jw.org in the yarn.lock? HOT 2
- Missing npx cmd into README.md file
- isDev is always true HOT 4
- when i change main.ts throw error flash back window HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-typescript-electron-sample-with-create-react-app-and-electron-builder.