I am using create-react-app to create my react projects boilerplates but recently launching my projects with npm start is too slow and most recently hot reloading is slow take from 5 - 15 secs to rebuild the page after any change especially when rebuilding after an error.
I really don't know much about webpack, after some search i found that problem can be from webpack or webpack-dev-server but i don't know much about them
so i don't know from where should i move to solve this issue?
If you're developing a React project in a Windows Subsystem for Linux 2 (WSL2) environment, it's especially important that you work within the WSL2 directory structure for optimal I/O. For example, you'll want to put the project in "~/repos/my-project", not "/mnt/c/Users/my-username/repos/my-project". They aren't the same location. You can confirm this by running "explorer.exe ." from the terminal.
Related
I am running a fresh react project with no single line of code written by me.
All I did was:
npx create-react-app my-app
npm install
npm start
The browser window opens and within my console window I see "Starting the development server". It is stuck there, have been keeping it up for over an hour with no progress.
I looked at different SO threads as well as many suggestions on other platforms. From limiting the RAM available to using another port, closing all browser windows, rebooting my machine - nothing helped.
Do you have any suggestions for troubleshooting?
Running on macOS 13.1 on M1 Pro.
It was the directory I started the project in. Using spaces and several special characters seems to break react as well es next.js which I tried next.
I have been working with reactjs from last 7-8 months, I have always used create-react-app to get started with any react application. but, by exploring more ways to get started with a react application I came to know there is a thing called vite which is I guess is providing a faster and leaner development experience for modern web projects.
I used it once till now, not in production yet as I am not very confident about it. So, which is a better way to get a simple template for react app. which is also better in production environment. Does using any one affects in production?
CRA uses webpack to handle its core functionalities. In the development webpack repeats the bundling process every time there is a change in the code. As a result, when your source code grows larger, everything becomes sluggish. The time it takes to serve a dev server and build your projects increases significantly.
Vite only needs to pre-bundle your dependencies using esbuild the first time you start development before it begins to serve your app.
Vite doesn’t need to bundle the entire app or transpile the modules and code before starting a dev server; transpiling is done on-demand, thus making it significantly faster than CRA.
https://blog.logrocket.com/vite-3-vs-create-react-app-comparison-migration-guide/#:~:text=Vite%20and%20CRA%20are%20not,and%20which%20modules%20are%20supported.
I have just created a regular create-react-app application, with the aim of sketching out components for a future project. But I ran into the problem that in order to see at least some, even small, changes purely in the text of the rendering component, you need to completely reboot the server using npm start.
And so with everything. I can even delete all the files from the root folder where I installed create-react-app, and the site on 127.0.0.1:3000 will still work (I tried). What should I do to enable hot-reloading?
We have an application that has multiple packages linked using yarn link.
When developing our app, we run ‘yarn start’ at the root which runs react-scripts and fires up the local server which is webpack under the hood from CRA.
We then run yarn start on the package we are updating, this runs a watch using webpack.
When we make a change in a package, the change is detected and react-scripts server hot reload recompiles, but it takes almost 20 seconds for the compilation to complete and a few more seconds for the browser to then reload to reflect the changes made.
I recently updated our versions of react and react-scripts to the latest and it seems to take even longer than the previous versions so it’s now taking about 30 seconds to reload.
I was wondering if it’s because we aren’t using yarn workspaces or a monorepo in general.
Does anyone have any experience with this and know of anything to speed things up as it’s becoming painstaking to work on our application as it currently is.
We tried to migrate to vite, but our application is too big to overhaul.
We heard snowpack might help but not sure how to migrate to that.
Does anyone know of any other potential tweaks like doing something to source maps or any drop in replacement for webpack that can help, that works with linked packages?
Thanks
I started a new developer role a few days ago and made some environmental changes to adapt for work. Since then, my hot reload/fast refresh has just stopped working entirely. Changes don't show up even if I refresh the page manually. Only shows changes when I stop the dev server and restart it with 'npm run dev'. The triangle indicator at the bottom right should be active, showing active reload of the window (this no longer shows up consistently either, and if it does the page gets reloaded, but alas the proposed changes aren't visible)
Context:
It has this effect on all NextJS and react applications of mine. Even running a basic project template off the NextJS examples page shows no hot reload working.
I researched this issue and it seems wrong imports (e.g. importing components using lowercase or files in the pages directory being capitalized) can cause this, but I combed through the code and can't spot any issues (of course, I could be missing it but my codebase is over 300 files).
Service workers in the background can cause issues, but I cleared my browser of all of them to be sure and it still doesn't fix it.
I installed ngrok for tunneling for work purposes and docker-compose to handle the work dev. environment.
Made sure I'm using the latest Next version. Even deleted node_modules and ran npm install. Deleted .next and the out folder and still no luck.
Anybody have any ideas or clues to what I should try next? Is it related to the stuff I installed for work? Something related to VS code or WSL2? Seems so puzzling it kind of just happened overnight. Thanks for any insight or advice!
System information
OS: Windows (WSL2 virtualization for VS code)
Browser: Chrome
Version of Next.js: 10.0.3
Version of Node.js: 14.8.0
Deployment: npm run dev for development work; amplify publish for AWS hosting
The problem is with WSL2. I use WSL2 inside VS Code; which is a big performance upgrade in the Linux environment. The problem is WSL2 is actually in a 'virtualization' and thus cannot send information from VS Code AND the browser (localhost:3000) at the same time.
It's a big issue they are working on and there is no fix yet for it. That's why fast refresh doesn't work because localhost is not receiving the changes being made. Either proxy through or revert back to WSL1 https://github.com/microsoft/WSL/issues/4769
Solution provide by OP on question section
Add a .env file or a .env.local file to your root and put this line on it:
WATCHPACK_POLLING=true
Now, restart your server.
Thanks I encounter the same issue with WSL2. I just switch to windows terminal and it works.
If you run Poweshell as administrator and run
wsl.exe -l -v
This will give you th eversion of wsl your distros run on.
I am personally using Ubuntu, and this is the output
Ubuntu Running 2
docker-desktop Stopped 2
docker-desktop-data Stopped 2
To switch to wsl 1,
Run
wsl.exe --set-version Ubuntu 1
and if you wanna switch back,
run,
wsl.exe --set-version Ubuntu 2.
This worked for me.
In my react projects, I just add in my .env file at the root project folder the values
FAST_REFRESH=false
CHOKIDAR_USEPOLLING=true
and it works! enjoy!
The problem is with WSL2. I use WSL2 inside VS Code. But React JS and Next JS projects don't auto-reload. So, add a .env or .env.local (recommended) file to your root and put these lines on it:
WATCHPACK_POLLING=true
CHOKIDAR_USEPOLLING=true
Now, restart your server.