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.
Related
OS: Ubuntu 22.04 | CommandBox Version: 5.5.2 | Lucee Engine: 5.3.9+141
Having a really strange issue. I've installed CommandBox from scratch and am using the Lucee engine. Everything works fine until it's time to pull my web files from GitHub. Initially, all the files are served properly, but upon restarting the service, it is unable to start. I've tried a couple of things (changing user/group ownership, copying the files manually, even changing file permissions for the folder and everything inside) but it fails to start every single time.
I'm able to bring it up by deleting the web root folder and recreating it. I'm also able to run files that I create locally with echo/touch no problem. Kind of at a loss here as to where to go from here.
It sounds like the number of files in your web root are causing the XNIO directory watcher to take some time starting up. you can disable it like so:
server set runwar.args=['--resource-manager-file-system-watcher=false']
And the restart the server. Please note, this setting will actually be disabled by default in the next version of CommandBox due to occasional issues like this.
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.
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.
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.
Writing an android application. It has no errors when I run it on an emulator. But when I tried to build it to an apk file to test on a device, I get the following error.
com.intellij.openapi.project.IndexNotReadyException: Please change caller according to com.intellij.openapi.project.IndexNotReadyException documentation
at com.intellij.util.indexing.FileBasedIndexImpl.handleDumbMode(FileBasedIndexImpl.java:853)
at com.intellij.util.indexing.FileBasedIndexImpl.ensureUpToDate(FileBasedIndexImpl.java:802)
at com.intellij.util.indexing.FileBasedIndexImpl.ensureUpToDate(FileBasedIndexImpl.java:786)
at com.intellij.psi.stubs.StubIndexImpl.processElements(StubIndexImpl.java:250)
at com.intellij.psi.stubs.StubIndexImpl.processElements(StubIndexImpl.java:238).......
I seen one similar case raised here which mentions to "Wait till indexing is complete."But I am not sure what I am doing to even interfere with any indexing.
Tried on different computers. Same problem. The only thing I did different before I got this error was to add a dependency at gradle(app) for a RingButton and added that RingButton class to the project to modify it to what I wanted.
As I said it is working fine in emulator.
Just to test if that is indeed the isse, I deleted the class and removed the dependency but the issue is not resolved.
I think this can be solved by creating a new project and moving the files into the new one. Maybe the index is corrupt. But before that can you clear the cache ? in android studio if your prepared to lose some local history then try this:
and then chose invalidate and restart:
I was using Dropbox to constantly backup my project every now and then. So I would click my project and send to Dropbox. I was also instantly clicking run to run the app on my emulator at the same time. During this period, when I mouse over my Dropbox icon, there is an indication that it is "Indexing".
Based on previous answer "Wait till indexing is complete", I can only assume this Dropbox indexing interfered somehow.
Not exactly elegant but I copied each and every file in this project into a New Project and everything is working fine now and able to install the apk file. I didn't change anything so I believe there is some form of corruption in the old project.