I was following this react course from YouTube.
I installed the create-react-app successfully and also ran the localhost server successfully on my browser afternpm start.
But the problem is that whenever I make a change in the component and save, I have to keep refreshing the browser by myself (browser is not refreshing automatically on save). But the browser of the teacher in that video refreshes automatically.
Please help me. Am I doing something wrong? or what should I do?
I think the best option is to use: npx create-react-app your-app-name when creating your apps so you can always have the most updated version. As per the docs: https://reactjs.org/docs/create-a-new-react-app.html
The best option would be to create your project in a C-drive ( any directory/folder in C drive), where your node packages were installed during the first setup of the node. I had a similar issue when my project was in D-Drive's Directory but switching to C Drive's Directory "C:\Users\USERNAME\Documents\ReactProjects\frontend\src" fixed my issue.
There might be different reasons why this is happening. Try one of the following solutions:
1 --> Increase the maximum number of allowed watchers in your linux environment. This is a known issue when running webpack inside of a VM like WSL2, as it happens when you execute npm start. To do so, issue the following commands in your terminal:
sudo nano /proc/sys/fs/inotify/max_user_watches
Replace the number you see with 1048576 and save the file. Then type exit and relaunch the terminal. Try npm start inside of your project folder again.
2 --> If the above didn't work, try setting the CHOKIDAR_USEPOLLING=true environment variable in your linux environment, which will reflect on your react development environment. Normally you would put this in a .env file inside of your project folder, but adding the variable to your .bashrc file will make it work with any React project you are working on. If you are only experimenting with React for now, I would recommend this solution. This change is unfortunately necessary when working inside of a virtual machine like WSL. Add the line export CHOKIDAR_USEPOLLING=true at the end of your .bashrc file. To edit your .bashrc file:
sudo nano ~/.bashrc
Then save the file and exit/relaunch your terminal. Try npm start inside of your project folder again. Hopefully this should fix it.
Related
I have been using the react tutorial of freecodecamp and I'm still stuck in the first step of using react. It appears that error of nmp enoent when I make my first app . I have used everything I have read on the internet but nothing seems to help. At the same time I realized that localhost:3000 doesn't works
To solve this error, you need to –
Close all the open terminal windows.
Even of other projects.
Restart the Metro bundler.
You may also check if you are using the wrong folder name in terminal. Sometimes, we delete a folder and still inside that folder in terminal. That will create issues. So, leave that folder and enter again. For example –
cd .. && cd folder_name
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.
Today I tried to create new react app using (create-react-app app-name) in CMD and this error appeared :
PS C:\Users\ahmed\Desktop\My File\New Folder\New Folder JS\New Folder> create-react-app testing-app
C:\Users\ahmed\AppData\Roaming\npm\node_modules\create-react-app\node_modules\fs-extra\lib\mkdirs\mkdirs-sync.js:49
throw err0
^
RangeError: Maximum call stack size exceeded
at Object.mkdirSync (fs.js:738:10) ...
Also, the installation will be stuck if I try to install any package in this folder like prop-type, I tried to update my node as well create-react-app but nothing change. I solved this problem by creating my react app in C:\Users\ahmed not in C:\Users\ahmed\Desktop\My File\New Folder\New Folder JS\New Folder
So my question is: why I can't create react app in a long path like C:\Users\ahmed\Desktop\My File\New Folder\New Folder JS\New Folder why it needs to be created in C:\Users \username?
I find the solution to my problem.
my problem was I tried to creating new react app using npm create-react-app app-name in CMD.
If I try to create react in C:\Users\user-name\ it will install all the packages and react app will work. But in my case, I tried to create react in different location C:\Users\user-name\folder\folder\folderand shows the above error.
I find many solutions most of them tried to edit npmrc file in C:\Program Files\nodejs\node_modules\npm, add or delete same confg in this file. but nothing works !!!
when I create react app the error shows in CMD but at the same time windows defender show this message
unathorised changes blocked
controlled folder access blocked C:\program\File...\node.exe from making changes to the folder C:\Users\user-name\folder\folder\folder
So, the solution was is to stop windows defender and create-react-app works in any location. you can stop windows defender by using different methods stop Windows defender. in my case, I stop Real-time protection, you can do that in windows 10:
settings > update & Security > windows security > virus & threat protection > virus & threat protection settings > Real-time protection "off".
But the best solution is to add node app as trust app in Windows defender settings or disable controlled folder access, you can do that by following this link Use controlled folder access
Please try to clear npm cache. Using following command.
npm cache clean --force
The above problem can be solved using the following approach:
If you're on windows, turn off windows defender and then retry create-react-app command. Mostly this should work. If the above solution doesn't work go for the next step.
Clear NPM cache by using the following command:
npm cache clean --force
Now, again retry create-react-app command. This worked like magic for me.
I had same problem
It comes from windows defender and firewall .
So add node.exe to the exceptions for windows defender and firewall and it may work.
I had the same problem in Ubuntu. I just used sudo create-react-app my-app and everything worked!
Option Resolution
Another reason you might be experiencing this issue specifically on Windows is due to spaces in your file path.
Make sure that your file path does not spaces, only "_" or camelCase.
Good Example
C:\Users\user.name\projects\project_01
Bad Example
C:\Users\user.name\projects\project 01
I trying to create a react native project, but always it gives me an download error (the create-react-native-app is installed), I try:
create-react-native-app Test
But always in the file ngrok-2.3.0.tgz I get an error. I downloaded the file manually, but I don't know where it goes, I try to put in AppData/Local/Temp (shown in the error text), but when running the command again, it overwrite the file and try to download it over again. Where are the react-native files to which I can put ngrok-2.3.0.tgz manually?
The registry had some issues a few days ago resulting in the same error.
Take a look https://github.com/npm/npm/issues/19816
You can also try doing things with yarn
Offline packages can be done with yarn link ngrok which will indicate yarn/npm to get the local copy of ngrok.
I have one issue with react auto reload browser/server.
If I run react on my local env. Everything is okay. Browser reloads.
But if I run react inside vagrant, browser reloads only when I edit react files via terminal > vagrant , but not in my text editor.
Maybe so thoughts? Maybe there are some vagrant conf that I need to know?
There is a simpler method than the one posted above, at least assuming you used the recommended create-react-app to create your app.
Add this line: CHOKIDAR_USEPOLLING=true to a file called .env that should exist or be created in the root folder of your project.
This link tells you more about environment variables & also contains info on the polling setting above. Be sure to read it so you know about the different .env file types and decide whether or not you want to use polling in all cases.
Configuring Webpack to webpack-dev-server --watch-poll should resolve your problem.
By default Webpack is subsribed to files changes via inotify, but:
Notification via inotify requires the kernel to be aware of all relevant filesystem events, which is not always possible for networked filesystems such as NFS.
So enabling poll will force Webpack to:
Check every few hundred milliseconds to see if your files have been updated.
Credits:
Webpack watch in Vagrant / Docker.
Running
the server does not compile files or reload page in windows..