Please provide support for ipcRenderer in renderer process (React component)
naheller opened this issue · comments
Hello!
I am working on an app that requires a persistent access token between uses. I want to store this token in the main process (Electron) so that it can be retrieved by the renderer process (React) whenever needed.
However, when I include const {ipcRenderer} = require('electron') at the top of my App.js component, Electron fails to compile with the error Module not found: Error: Can't resolve 'fs' in '/Users/nheller/Projects/training-tracker/node_modules/electron'
Executing npm install --save fs installs fs as expected, but the error remains unchanged.
Does this boilerplate support ipcMain and ipcRenderer? If so, how do I go about facilitating communication between the main and renderer processes?
Thanks for reporting this! This was an oversight by me.
I will have an official fix later, but for now in the two webpack config files, the following is needed in the config object: target: 'electron-renderer', (see my other project's file: https://github.com/pbarbiero/enhanced-electron-react-boilerplate/blob/master/webpack.build.config.js)
Once that is added, webpack will properly handle that all for you and I would uninstall the fs package you installed.
Hey there, thanks for your reply! I added target: 'electron-renderer' to both config files, but now I get the following error: Uncaught ReferenceError: require is not defined, which likely refers to the const {ipcRenderer} = require('electron') line that I added in the first place.
Does the React component renderer process have access to require() commands? Your help is appreciated!
Edit: I will add that my first error came up on the Main process and prevented Electron from compiling. Adding target: 'electron-renderer' allows Electron to compile correctly, and now this second error is coming out of the React renderer process.
Hmm. I dont think this is an issue with my boilerplate anymore.
You didnt set nodeIntegration: false in main.js did you?
Also, you are using npm run testDev or npm run testProd to load the compiled code in an electron window, right?
Later tonight I will have time to test this myself and try to fix it if the above doesnt resolve it.
You're right -- I think this issue is rooted in my own misunderstanding. Until now, I've been debugging my Electron app through my browser by running npm run dev. Only sometimes do I follow that up with npm run testDev.
Unlike the browser window, the Electron window does not report any sort of error regarding require().
From your documentation, I understand that npm run dev opens the webpack dev server. Why do I get the require is not defined error in this environment (viewed via a web browser console), while the Electron window is error-free?
Thanks for your help!
Sure, quick overview:
While electron apps do run in a chromium instance, it obviously has a LOT more going on. Part of this is supporting require() along with its internal modules. Thats how things like 'fs' still works INSIDE the browser where normally this is only available inside of node itself.
Because of this, you HAVE to be doing your development inside of an electron process instead of loading the client code directly. If you just wrote a basic renderer process that does not interface with node modules at all, you can get away with how you've been doing it, but the whole point of electron is to provide access to system/node level things such as manipulating the filesystem.
Hopefully that clears it up. Again, thanks for your report and I will do my best to push an official patch for this later tonight.
That clears it up! I'm still learning Node, React, and Webpack, so any guidance really helps. Thank you for putting this boilerplate together and being so accessible to questions and comments.
Pretty soon 120+ people at an IT-learning company in Oregon will be using a tool based on your boilerplate on an everyday basis!
Fixed in 0.5.0