So I'm getting a blue screen of death whenever I have "npm start" running for a reactjs app. It's an intermittent crash, i.e. it doesn't happen every time I run it nor are there any exact steps to duplicate the crash, but I'll try to explain below under what circumstances it happens.
Create a reactjs app using create-react-app npm module.
Start the app using npm start. Chrome window opens, webpack is listening to changes I make to the source files.
Change any source file, and save it. NPM compiles it, Chrome page refreshes, and I can see my changes.
The above things work fine as expected "normally", but once in a while, right after I save a file, the system crashes with a BSOD saying DRIVER_IRQL_NOT_EQUAL_TO_OR_GREATER_THAN (NETIO.SYS) There is no definite "step" or action other than saving the file, or refreshing Chrome that would cause this to happen, and it also doesn't happen every single time.
Here are the steps I took to find out/eliminate the root cause of this issue:
Disabled by AV (Symantec Endpoint Protection).
Use a different browser (Mozilla, hell, even IE).
Changed the system (used a different laptop, although the same type - Microsoft Surface on Windows 10)
Updated all drivers, etc. (Verified by my organization admins)
Closing all other programs, etc. that might potentially be interfering (Atom IDE, Eclipse, etc.)
The necessary conditions for the crash to happen are:
npm start must be running (webpack server on localhost:3000)
A browser window must be open connected to localhost:3000 (if no browser is connected, it doesn't crash even if you change and save the file 200 times - I checked). Also, doesn't matter which browser (Checked with Mozilla/Edge/Chrome)
I believe the crash happens when NPM is recompiling the files and serving it to the browser (asking it to refresh using some websockets), but I'm not an expert on NodeJS/NPM so I'm not sure.
I've been stuck on this issue for more than 2 weeks now. Any help would be really appreciated. Kindly let me know if more information is needed.
The issue was with Symantec DLP (Data Loss Prevention) that was also installed on all our systems. The issue resolved itself after the admins added application exceptions for Nodejs, NPM, my reactjs project workspace paths.
Just posting this so that in case someone has a similar issue they can try this or remove Symantec DLP altogether.
Related
I have a Next.js project that has been a real delight to work on until recently when changes stopped showing up in the browser. Normally the browser hot reloads, but now even hitting refresh won't show changes to the code—I have to shut down the dev server and run npm run dev again to get the changes to show up. This doesn't happen in all my Next.js projects—just one of them.
I've tried deleting the .next/ directory, but that didn't fix the problem. Any other ideas of where I could look to get this back to normal?
Next 12.1.0
Node 14.18.1
macOS 12.3
I had the same issue. In my case it was case sensitivity.
It turned out I renamed one of my components where the new name only had a letter changed from uppercase to lowercase (e.g. MyCOmponent.tsx -> MyComponent.tsx).
I made all the changes everywhere but missed one, the import path of the component in one of the pages.
I had: import MyComponet from '../../MyCOmponent.tsx'
Everything still worked when restarting the server, but hot reload or even browser refresh wouldn't, same as OP. Fixing the typo fixed everything.
I faced the same issue. I created a new file with a different name and copied all the content which was inside the file that did not show the changes. Then it started showing the changes in the browser.
I used the npm command to create react app, after that my laptop fan started to get louder and when I tried to open any folder it's just not responding. File Explorer is frozen, it said loading the files but it will take forever. I just can't do my work.
I tried to restart File Explorer from task manager and it won't work.
The only way to fix it is to restart my laptop, but it will happen again sometimes even if I don't do anything with the react project. I just need to restart it a couple of times until it back to normal
The first time it happens I wasn't sure because it was the first time I tried to create react and my laptop also had some problems at the time, so I leave the react project for a month.
The second time is yesterday. When I tried to create react app again, File Explorer got freezing.
All this happen after I used the npm command.
Does someone know the answer? I've been trying to learn react and this makes me discouraged. Please help. (Sorry for my poor English)
I think your pc can't handle create react app. It's very heavy and consumes everything in your pc. Probably if you just let it install without using anything it will be ok.
I have my work computer which is a Windows 10 Pro and my laptop is a Windows 10 Home. Working on the same project on both: push and pull to Git. Learning React through Udemy. Both computers using Chrome. Both using Bash on Ubuntu on Windows with latest updates. Both using ConEmu for the console. Both npm -v = 3.10.10. Both node -v = 6.11.2. Hardware is different obviously, but not sure that is relevant and worth listing.
Anyway, this starter project I am playing around with, when I make changes to it and npm start is running, you can see activity in the console, hit refresh in the browser, and any changes made will be reflected.
On the laptop, this process does not work. Make change, save, no activity in console, refresh in browser does not reflect the changes. Have to restart npm start for changes to be reflected. A little irritating to say the least.
Anyway idea what might cause this? Really haven't come across anything in my Googling efforts.
If you are using npm in WSL2.0 for development, please refer the last point in this-
https://create-react-app.dev/docs/troubleshooting/#npm-start-doesnt-detect-changes
While WSL1.0 doesn't use a VM, WSL2.0 does use a lightweight VM, so adding
CHOKIDAR_USEPOLLING=true
in a .env file in the project directory fixed the problem.
On a sidenote, you might wanna take a look at this
Client side
To ensure client side changes aren't being cached, you can open devtools > Network, and check "Disable cache". After enabling this, you won't have anything in the cache as long as devtools is open.
Alternatively, you can use incognito / private browsing mode to prevent the cache from holding on to things.
Server side
I'm sure you've realized that it's a pain to restart your server every time you want to see your code update. There are several tools that will detect file changes and handle restarting the server automatically.
PM2
Nodemon
Forever
I just add file .env and inside FAST_REFRESH=false.
For me, working in Windows, WSL2 caused this not to work. Running npm start in Command Prompt, not WSL solved this issue for me.
I'm having an issue in my React environment where I must restart ('npm start') my server every time I want to view an update in the browser. Others seem to be able to simply refresh the browser without the need to restart their servers.
For instance, if I make an update in one of the React Components I can't simply refresh the web page, I have to restart the entire server.
Any suggestions how to fix this issue so I don't need to restart every time?
This problem was fixed once I moved my application out of my Dropbox directory.
Once I moved the application out of the Dropbox directory I no longer needed to manually restart the server when I made any edit to a React component. Note that the application does work just fine and auto-refresh using Google Drive
(linked to the cloud) or a general non-cloud linked folder on my HD.
I was getting the same problem using Visual Studio Code. When I made changes nothing was showing up. VC gave me a hint by saying
"Visual Studio Code is unable to watch for file changes in this large workspace"
so I found these instructions which solved the problem. Could be related.
When you see this notification, it indicates that the VS Code file watcher is running out of handles because the workspace is large and contains many files. The current limit can be viewed by running:
cat /proc/sys/fs/inotify/max_user_watches
The limit can be increased to its maximum by editing /etc/sysctl.conf and adding this line to the end of the file:
fs.inotify.max_user_watches=524288
The new value can then be loaded in by running sudo sysctl -p. Note that Arch Linux works a little differently, See Increasing the amount of inotify watchers for details.
Check out Create-React-App by Facebook. It has all the essential tools you'll need when developing React apps.
I use a combination of Webpack to bundle the js code and Nodemon for server restart. They both have watch functionality so they can watch the code to see if anything has changed.
Seems to be an norm from my research.
I'm making an app in the Cloud9 IDE using Node.js with the Express.js framework. Something very odd is happening to a specific .ejs file where if I try to update it (like typing some mumbo jumbo in an h1 tag and then saving and restarting the server), it NEVER gets reflected in the browser no matter what I do. For example, if I delete my jumbotron, save, restart the server, and then refresh the browser, I still see the same page with the jumbotron. I also tried deleting this entire file and then restarting the server and I still see the page and it doesn't break my application which is bizarre. All other .ejs files are fine and I can see the changes that I make.
I've spent about 4 hours trying to figure this out and no one else seems to have my specific issue. I tried clearing my browser cache, using different browsers, logging in/out from Cloud9, creating a new database, going back to older versions of my code, etc. and nothing seems to be working. I'm not even sure what code to post on here since my entire app is about 2000 lines of code so far. Does anyone have any suggestions because this is really frustrating.