Description
Please, I'm desperate. For the last 3 days, I've been trying without luck to implement react-hot-loader within an electron app and don't know what else to try. I'm following many comments, posts, issues trying to replicate what they did but none gives me enough information about the entire setup so I can find what I'm missing. I've already tried electron-webpack but it didn't work for me. It has HMR from webpack, but no react-hot-loader and that makes applications using react-router a pain to work with. Maybe it's not possible, but people seem to have achieved it so I'm not willing to give up.
Expected behavior
Project setup with electron, webpack, webpack-dev-server, react, react-router, react-hot-loader. I want to be able to change CSS and HTML strings without having to rebuild the entire project with webpack and restart it.
Actual behavior
Looking for the right styles in a component accessed through react-router links takes forever. Can't keep doing this. I've been using the dev tools for that purpose but it's not even close to the speed achievable by trying things in an IDE.
Environment
Deps:
electron 4.2.10
webpack-cli 3.3.7
webpack-dev-server 3.8.0
webpack 4.39.3
react-hot-loader 4.12.12
react-router-dom 5.0.1,
System:
OS Ubuntu 18.04 LTS
node 10.16.2
npm 6.9.0
yarn 1.7.3
Reproducible Demo
This is the project I'm trying to set it up for https://github.com/nahuelarjonadev/kafka-lens/, but I'm ultimately looking for just a super simple working demo so I can mirror the configurations or at least get a hint on how to do it. I couldn't find one yet.
Use the webpack react electron boilerplate and add on it the react-hot-reloader or whatever else you want to add, i am sure that will probably work, is a good starting point for sure.
https://github.com/electron-react-boilerplate/electron-react-boilerplate
Related
I have been trying to setup a monorepo using turborepo. I want to have a Nextjs application along with a React Native application (using Expo).
I have come as far as getting everything to work using yarn and it's no-hoist options as well as expo-yarn-workspaces. You can see my repo here: https://github.com/juliusmarminge/turbo-expo-next-starter. This is my first monorepo so not sure if it follows conventions by any means.
The issue I'm getting into is I don't want to be forced to use Yarn, especially since pnpm is getting more popular and I use it for most my other projects. Has anyone any experience in using Expo in a monorepo without using Yarn? Feels like all examples online is using it...
Thanks in advance,
Julius
You can use it with pnpm AND get-workspaces (from yarn) to update your metro.config.js and to resolve node_modules.
I have a React project using Typescript built using create react app.
The start command react-scripts start takes around 50s on first time and around 3 seconds on any file change.
How can I speed up the build time specially after each change in code?
Some things I already tried
Used craco and introduced esbuild instead of babel
Disabled eslint in dev mode
But these did not gave me much improvement in speed.
In which direction I should be debugging this more?
I found that if we eject the CRA and use Vite instead of Webpack makes a lot of difference in the build time. You can try that.
There are a bunch of questions already covering this exact error, but I've been through all of them, and so far none of the answers have worked for me. Platform is MacOS
Here is the error:
Steps to reproduce
(Following official React Navigation docs https://reactnavigation.org/docs/getting-started/):
Create a new expo managed app
expo init my-app
Navigate to directory
Start the app
expo start
**** At this point everything starts and works correctly ****
Install reactnavigation(follow official docs https://reactnavigation.org/docs/getting-started/ )
yarn add #react-navigation/native
Install dependencies
expo install react-native-screens react-native-safe-area-context
Wrap the code with a Navigation container (per the docs)
Start the app
expo start
**** App no longer works. Fails with the error I posted earlier ****
Things I've tried that haven't worked
The instructions that the error message provides (though I skip step 1, as I don't have watchman watches installed). Main thing here that I would expect to work is the deletion of node_modules and yarn.lock, but no luck :(. Same with deleting cache
using yarn add to add the dependencies instead of expo install
using npm to install everything
updating expo-sdk (I'm already on latest)
reinstalling everything
So, I actually was able to answer my own question in the process of writing it. I often do this, as I make sure to spend several hours trying to debug in the process of writing the question and making sure I've covered everything I can think to try.
Not sure of official self answer etiquette, but this was a pretty frustrating error for me, so I figure I'll post what worked for me here in case it can help anyone else in the future.
Answer:
The issue for me had nothing to do with the code or app itself, but rather the IOS simulator. Force quitting the simulator and restarting resolved the error. It seems that simply ctrl^c -> expo start -> i -> r is not enough to clear the internal state of the simulator.
There was actually even a clue in the error message itself, but I missed it because the error looked so similar to the one I was expecting. The clue was in the name of the module it was unable to resolve "#react-navigation/native-stack". In my reproduction steps, I was only using the NavigationContainer, as I was trying to get that working before installing any of the Navigators and trying to use those.
Why was it trying to resolve the native-stack navigator? I'm not 100% sure, but my guess is that there was some kind of cache in the simulator that wasn't being cleared properly. Why do I think that?
This problem started with me trying to use a native-stack navigator in another app I'm working on. I quickly ran into this error, and figured the best way to debug would be to spin up a brand new blank app and try to get ReactNavigation working in there. I started with just navigation package and NavigationContainer itself, and once I couldn't even get that working, I assumed the problem was with the base react-navigation package installation. I failed to notice that it was still trying to resolve that native-stack navigator.
I have looked at tons of various posts but barely could find on how to make webpack work with electron in secure way.
A lot of devs suggest to enable nodeIntegrations and disable contextIsolation.
But this can lead to security flaws? electron security
I have used electron forge to build the project skeleton. I can run the electron app in dev mode. But when I try to package it
I get Uncaught ReferenceError: require is not defined
How can this issue be solved without enabling nodeIntegrations and not disabling contextIsolation.
Any help would be appreciated.
The project I had was built with electron forge.
I run in various different issues.
For me what fixed all issues was upgrading all packages with yarn upgrade.
Now the electron app created executable without issue and contextIsolation works as well.
If someone experience similar issue try to upgrade the packages.
I'm just a bit annoyed by having to do npx create-react-app and wait then delete most of the files and code.
I've seen some people use npm i react react-dom, is this another way as well?
can i also use react offline ?
You can add a in your html if you don't want to use create-react-app. Then just create a file with that name. Otherwise I believe other methods still give you a boilerplate.
Even if without create-react-app, can make React applications. But it's bother than with it. create-react-app just automates downloading libraries and many many configurations. So what they do is same.
Create react app creates spa and gives entire folder structure out of the box, but you don't always need to use cra command for that, you can create spa yourself with minimal packages if you know the actual working of spa, you can use react, webpack, webpack dev server, babel.