-
Notifications
You must be signed in to change notification settings - Fork 15.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Error while importing electron in react | import { ipcRenderer } from 'electron' #9920
Comments
CRA uses webpack which messes with standard module loading (including fs). I'd recommend looking into the Electron mode for webpack and ejecting from CRA |
GitHub issues are for feature requests and bug reports, questions about using Electron should be directed to the community or to the Slack Channel. |
@MarshallOfSound my mistake. I found the solution in issue #7300 if it can help anyone. const { ipcRenderer } = window.require('electron'); Please note that this will work when you run the Electron app, but if you just want to test your React code inside the browser it will still crash (window.require is not defined in the browser as it is in Electron). |
If you want to access app.quit(), you can use this: const { app } = window.require('electron').remote; Maybe it helps someone... |
@ciriousjoker these is solutions, thanks! |
I'm still getting I've set my Electron app to load my app from the web, so the app is not running locally: What I'm trying to do, is call the |
In the same boat as you... Did you find a solution? |
No. I'm pretty sure it's not possible to load the ipcRenderer from the browser. |
If you are running your React app in the browser it won't work. Run it inside Electron and you should be fine. |
@Amthieu Thanks for the advice. I'm still in doubt as to how I can make my React project (based on React Starter Kit) run in Electron. Any advice would be greatly appreciated: https://discuss.atom.io/t/getting-electron-to-work-with-react-starter-kit/48594 |
Right, I have a solution.
window.ipcRenderer = require('electron').ipcRenderer;
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
preload: __dirname + '/preload.js'
}
});
componentDidMount() {
if (isElectron()) {
console.log(window.ipcRenderer);
window.ipcRenderer.on('pong', (event, arg) => {
this.setState({ipc: true})
})
window.ipcRenderer.send('ping')
}
} Note - using this: https://github.com/cheton/is-electron for the |
@HemalR Step 3 should be the following (now): componentDidMount() {
if (window.isElectron) {
console.log(window.ipcRenderer);
window.ipcRenderer.on('pong', (event, arg) => {
this.setState({ipc: true})
})
window.ipcRenderer.send('ping')
}
} Note: |
Apologies - should have added where I am getting isElectron from, have edited my code example with the link to: https://github.com/cheton/is-electron |
@holgersindbaek |
for me only work if
|
work great the @HemalR solution! now HOW to send FROM electron TO React? tried with ipcMain.emit("pong", "Hello!"); but nothing got received from the React listener window.ipcRenderer.on("pong", (event, arg) => {
console.log("PONG");
}); is correct to use ipcMain.emit() or should I use something else? |
ok just found I have to use (on the electron main process) mainWindow.webContents.send("pong", "Hello!"); thank you to all! |
I tried all of the above to no avail. What worked for me was a giant hack. Modify the file e.g.
|
Wow, I couldn't get the IPCRenderer working on my React Components. I've tried all of the method above. Did any of you incidentally have any hints that I can use for it to be working? thanks |
Hmmm... My electron app still works just fine using my solution above - but I haven't updated it in a few months now (haven't needed to). I wonder if there is a breaking change that would stop this from working? Maybe you guys can post your electron versions? @cyclonstep Is there any specific error you were getting? Hard to help without a code snippet or some logs... |
I am using parcel for bundling.
( further below in the same file is the electron „pong-Demo“, which kinda prooves, it works) Perhaps noteworthy: Even when doing it wrong, bundle size does not grow (compare to without the electron-require. This is so far my first&so far only render-side electron import) by the entire Electron size or such, but only by around 20kb, which seems to be some shim/wrapper code on its own, coming from
Anyway, things work as said above. Node version 10.2.0 |
|
And for typescript: import {IpcRenderer} from 'electron';
declare global {
interface Window {
require: (module: 'electron') => {
ipcRenderer: IpcRenderer
};
}
}
const { ipcRenderer } = window.require('electron'); |
@moshfeu Your solution works fantastic. I don't need Webpack or Browserfy to use IpcRenderer in my React project. Thanks so much again :D |
For typescript and using @HemalR 's example from above but WITHOUT
combined with I used this: import { IpcRenderer } from 'electron';
declare global {
interface Window {
ipcRenderer: IpcRenderer
}
}
export const { ipcRenderer } = window; Hope that helps someone out there! Works with stenciljs, and I imagine react and angular |
just add target: "electron-renderer" in webpack configs. |
This is what I came up with today because I need to use BrowserWindow.
I organize my api concerns into topic dedicated modules. In it, I have my functions to 'do stuff'. These can be called from preload and from main context. The renderer process can access it via ...
... and the main context (triggered e.g. by context-menu) via a simple:
The topic module itself:
in main I init topic module(s):
and finally preload script
|
The above solutions did not work for me. Note: I am using typescript
|
An insecure solution (https://stackoverflow.com/questions/56091343/typeerror-window-require-is-not-a-function/56095485). I wanted to use typeorm with sqlite without signaling through ipc.
Database is a class that instantiates a connection to the sqlite database. In essence:
From within react:
After which this should produce a valid output:
Hope somebody will find it useful. |
Got this working with craco, here's my
|
I am trying your solution, but I don't understand, where do you use preload.ts? |
Here's what I did: I used the // All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
const { contextBridge, ipcRenderer } = require("electron");
// As an example, here we use the exposeInMainWorld API to expose the IPC renderer
// to the main window. They'll be accessible at "window.ipcRenderer".
process.once("loaded", () => {
contextBridge.exposeInMainWorld("ipcRenderer", ipcRenderer);
}); This will make There is, however, one thing I don't understand. Why can't Electron just make it bloody work?! How hard can it be to expose some stuff into javascript? Why do we have to jump trough a billion hoops to get foundational functionality working?? I have just spent 2 goddamn hours gettings this to work. I could have have been infinitely more productive without this nonsense. Oh and I forgot to add, place this in a sensible file somewhere if you're using Typescript: import { IpcRenderer } from 'electron';
declare global {
interface Window {
ipcRenderer: IpcRenderer
}
} Because I am using Typescript, and this makes it typed. Obviously you will be needing to do this for each thing you expose through the context bridge. |
For anyone new coming to this thread, @reZach has a comprehensive answer with various solutions (from easy to best) that outline what they are and what the vulnerabilities are. To summarize the security vulnerability: |
The issue with this forced ContextBridge pattern is that we can no longer use MessagePorts. |
@thany thank you very much for this answer. Having pulled hair out with this pile of junk for so long, your solution indeed provided a fix for TS - the contextBridge exposure was the key. |
This worked for me mainWindow = new BrowserWindow({
width: 700,
height: 680,
webPreferences: {
nodeIntegration: true,
contextIsolation: false // add this
}
}); And then you can use in the react component |
slight adjustments to file structure. changed webpack configuration to support mp4. when i copied the session screen over, received error locating 'fs'; unsure if this is the same issue, but i was able to quickly resolve it by replace require('electron') with window.require() electron/electron#9920
I have created a simple react app with create-react-app and I have integrated it with electron successfully. Everything was working great until I tried to import electron inside the action creator file. If I remove the line below, the app works fine. The problem is that I can't use the ipcRenderer to communicate from the react side to the electron main process.
This line causes the app to crash:
import { ipcRenderer } from 'electron';
I get the following error:
TypeError: fs.existsSync is not a function
(anonymous function)
node_modules/electron/index.js:6
I found out on Google that this is a common problem when trying to import electron.
Thanks for the help
The text was updated successfully, but these errors were encountered: