I am following a tutorial on React using create-react-app.
The application is created by create-react-app v1.3.0
create-react-app my-app
The dev server is run by
npm start
After changing the code several times, the browser is not updated live / hot reload with the changes. Refreshing the browser does not help. Only stopping the dev server and starting it over again capture the new changes to the code.
I was reading a lot of unnecesary stuff.
I am using React 17.
And my problem was that the page just add new components but the browser was not refreshing the page.
If your terminal is Compiling... and then you don't see changes on the browser, you should try adding a .env file in the root path of the project and add FAST_REFRESH=false.
Hot refresh was replaced by Fast refresh by default.
Have you seen the “Troubleshooting” section of the User Guide?
It describes a few common causes of this problem:
When you save a file while npm start is running, the browser should refresh with the updated code.
If this doesn’t happen, try one of the following workarounds:
If your project is in a Dropbox folder, try moving it out.
If the watcher doesn’t see a file called index.js and you’re referencing it by the folder name, you need to restart the watcher due to a Webpack bug.
Some editors like Vim and IntelliJ have a “safe write” feature that currently breaks the watcher. You will need to disable it. Follow the instructions in “Disabling swap files creation in vim”.
If your project path contains parentheses, try moving the project to a path without them. This is caused by a Webpack watcher bug.
On Linux and macOS, you might need to tweak system settings to allow more watchers.
If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an .env file in your project directory if it doesn’t exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start, the watcher uses the polling mode, as necessary inside a VM.
If none of these solutions help please leave a comment in this thread.
I hope this helps!
Adding a .env file in the base path of the project and inside add FAST_REFRESH=false.
This disables fast refresh and returns to hot reload.
If you don't want to add a .env file to your base path you can choose these options:
"start": "FAST_REFRESH=false react-scripts start", in the package.json.
FAST_REFRESH=false npm run start, on the command line.
FAST_REFRESH=false, exporting it as an environment variable.
React 17
React-scrits 4
Have you tried npm start with super user permissions? I had the issue with my project and I solved it like this.
$sudo bash
#npm start
In WSL2 work for me, "If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an .env file in your project directory if it doesn’t exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start, the watcher uses the polling mode, as necessary inside a VM."
Or just run:
$ CHOKIDAR_USEPOLLING=true npm start
Spent few hours fixing this:
1 . Create a file .env (beside package.json file) add below contents:
File: .env
FAST_REFRESH=false
2 . Now, stop & start the server
(Ctrl + C to start, if in CMD, on Windows OS)
npm start
4 . Now, change some text in the App.js
File: App.js
from "Learn React"
to "Learn React And it's working"
NOTE:
1 . Server restart is important.
2 . Refresh browser tab if you dont see changes.
In my case, it was there are not enough number of file watchers. I have to change the configurations manually.
See active file watchers limit using below command on terminal.
cat /proc/sys/fs/inotify/max_user_watches
Add below line to the /etc/sysctl.conf file.
fs.inotify.max_user_watches = 524288
Apply changes using the command below.
sudo sysctl -p
I had this problem while running npm within WSL. I had the project folder in my windows Desktop folder from which npm cannot recompile automatically in WSL.
After moving the project folder to user home directory of WSL solved the issue.
just create .env file in the root of your app
and add the following to it
.env
FAST_REFRESH=false
On win10 in WSL2, I had to create the .env in the root folder, and include both
FAST_REFRESH = false
CHOKIDAR_USEPOLLING=true
My setup doesn't include any virtual machine (unless WSL2 is considered a VM?). Nevertheless the .env with the above two entries got it up and running.
Find your index.js and change something in this file, for example add a white space, then save.
It should show "compiling..." in your console.
Then you can modify other files and react will refresh on save.
It seems that npm is looking for changes in the index.js at the very first time, if you refactor your folder structure the index.js could be missed. Force an update in index.js file get the problem solved.
At least this has worked to me
For users of WSL2, be mindful that if your project is in your Windows System(ie C: or D:) then it won't work.
Solution 1:
access these files through the WSL share, \wsl$\DISTRO_NAME from Windows.
Solutions 2:
Inside your package.json
find
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
and replace it with
"scripts": {
"start": "CHOKIDAR_USEPOLLING=true react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Credits to https://github.com/facebook/create-react-app/issues/10253
As of react-scripts version 5.x.x CHOKIDAR_USEPOLLING=true no longer works in a .env file. You now need to use WATCHPACK_POLLING=true in the .env file in the root of your project. Per this thread.
If you are using visual studio code, you can create a new file and save it as .env. Inside, .env write FAST_REFRESH=false and save. Then, run npm start and this worked for me.
Edit: This might not be a recommended solution. The solution worked for Docker.
If using docker with a volume mount, you need to add an .env file in the src folder with the command CHOKIDAR_USEPOLLING=true in it. However, for me this threw an error
/app/src/App.js: Cannot find module '#babel/parser'
. To resolve this new error, changing the "react-scripts": "3.4.3" to "react-scripts": "3.4.0" in the package.json file worked. So you depending on your situation you may need to add the .env file and also change the react-scripts version.
Note: To put a little more context, I was working with docker and the react app files were mounted as a volume in the docker image (so that making changes in the app are directly reflected in the app without rebuilding a docker image). The above solution is based on other solutions posted in the community for docker where people had suggested changing the react scripts version. I don't think this should be a recommended solution. However, since I was doing a tutorial series I wanted to save time and focus on other things.
In case people come here looking for a better solution, my issue was resolved by moving my files inside the WSL2 filesystem. Hot reloading worked straight away with no need to add an .env file.
If you are running your app behind a reverse proxy / nginx (e.g. to enable https locally) you also need to enable websockets so it can detect the refresh:
location /sockjs-node {
proxy_pass http://dockerhost:5000/sockjs-node;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
In package.json, use "react-scripts": "3.4.4"
Delete package-lock.json
Run "rm -rf node_modules && npm install"
npm start
I was confused about how to create a .env file and even when i did it still didn't work. I was able to fix the issue by running this command on my terminal.
npm run start -FAST_REFRESH=false
Hopes it helps someone.
I ended up here seeking answers to a similar issue. Although mine was specific to one page that wasn't hot reloading. I do want to point out this is using Nextjs and it was a page under /pages named subscribe.js (/pages/subscribe.js)
It was very frustrating and admittedly took a while to figure out.
A lot of technical answers here, but interestingly, my issue was that my functional component did not start with a capital letter.
import React from 'react'
export default function subscribe() {
return (
<div>
</div>
)
}
Where the function name needed to start with a capital like so
import React from 'react'
export default function Subscribe() {
return (
<div>
</div>
)
}
As they say, you learn something new every day. In this game it's more like 10 things, the trouble is remembering what you learn ;)
push your commited changes to the branch and then delete the local repo folder then clone the repo again and run npm install or yarn install whichever you prefer.
this workaround solved my issue
Try using this command
echo fs.inotify.max_user_watches=524288
sudo tee -a /etc/sysctl.conf && sudo sysctl -p
If still, the error is there then you need to remove your node modules and again
npm install
and then
npm start
You might wanna add -w to {"start": "react-scripts start -w"}.
I had the same issue, fixed by adding --watch.
After creating a new project using create-react-app toolchain
Make sure to run
npm install, then
npm start
"dependencies": {
"react": "^17.0.1",
"react-scripts": "4.0.1",
}
if you are using these version then create .env file on the root directory of your project and type FAST_REFRESH=false and save it. Then yarn start OR npm start.
for linux first check the number of the files allowed using:
cat /proc/sys/fs/inotify/max_user_watches
in my, it was 8192 so I just change it to 524288 and it worked perfectly.
commands use to change is:
cd /proc/sys/fs/inotify
sudo nano max_user_watches
and then change no to 524288
save it and then use this command to apply the changes
sudo sysctl -p
reference from https://blog.jetbrains.com/idea/2010/04/native-file-system-watcher-for-linux/
Watch out where you add your .env file to. When you call create-react-app app-name, React will add following folder structure:
./root
./app-name
./node_modules
./public
./src
package.json
README.md
My problem was, I added .env file (with FAST_REFRESH=false inside) under the ./root directory. Placing the file in my ./app-name folder solved the issue.
I tried all the above suggestions, but still my react app does not refresh on code changes. Then I copied the previously working react project folder (only frontend) pasted it into the new project I am starting. Removed all the code related to old project and started using it. This solved my problem.
If this is feasible for you, you too can adopt the same method. If anyone discover a new simple solution, please post it here.
I had to run npm build everytime I wanted to refresh the app. Reinstalling node and npm didn't help. The project used a build tool called Parcel. Deleting the auto generated files such as .parcel-cache and dist resolved the issue for me.
My solution was to delete auto generated untracked/ignored files. The following git command might help:
git status --ignored
If you are on linux, check if it works with root access. If it does, stop your server and disable enforcement (for more details, man selinux).
sudo setenforce 0
Start your server again (without root), it might work.
Related
When I type "npm run test" in the command line, npm goes to package.json, to the "scripts" section and tries to match "test" there.
So far so good.
Now, the line behind "test" is the following: "JASMINE_CONFIG_PATH=./spec/support/jasmine.json jasmine-run" but the first part (everything except "jasmine-run") can be removed witout problems. [I have a similarily structured project where it works, so I can test these modifications]
now:
WHERE is npm looking for "jasmine-run" ???
Because since I have a project where the script provided work, I could look for it, but the answer is: in the node_modules folder next to package.json is a module, in whose package.json has, in the "bin" section:
"jasmine-run": "tools/jasmine-run/jasmine-run.js",
However, this exact setup exists in both projects. and in one everything works, while in the other "jasmine-run" cannot be found.
As ana lternative to an answer I'd also take a proper explanation (or source) on how/where npm run actually looks for its stuff, because then I could probably find the error myself.
When you run a script with npm like :
npm run-script <name>
or with a shortcut like
npm test or npm start,
your current package directory's bin directory is placed at the front of your path.
For your and in many of the cases will probably be
./node_modules/.bin/,
which contains a link to your package's executable scripts.
Anyway you have all the explanation how npm runs work here : https://docs.npmjs.com/cli/run-script
npm run adds node_modules/.bin to the PATH provided to scripts. Any binaries provided by locally-installed dependencies can be used without the node_modules/.bin prefix.
Check if you can locate jasmine-run inside node_modules/.bin directory.
For reference have a look at this post: https://docs.npmjs.com/cli/run-script
In case anyone else ends up here looking for the answer after running create-react-app, here is where I found them.
The line from package.json is
"start": "react-scripts start"
In VSCode, open the node_modules and scroll down to react-scripts.
Then open up 'scripts', and there they are.
I got a big project that is a monorepo consisting of multiple scripts and libraries, its structure is the following:
package.json // "private":true
\packages
\comp1
\package.json // an actual component
\comp2
\package.json // an actual component
\comp3
\package.json // an actual component
I've made a monorepo.tgz using yarn pack.
Then I made a test app whose package.json look like this:
"scripts": {
// this is a script in one of the monorepo's components
"start": "ui-build --bundle --watch -p 3000"
}
"dependencies": {
"comp1": "../monorepo/monorepo.tgz",
"comp2": "../monorepo/monorepo.tgz",
"comp3": "../monorepo/monorepo.tgz",
...
but its not working, when I run start its complaining that ui-build: command not found.
How can I test this monorepo locally to simulate a published npm package as closely as possible?
Using npm link (or yarn link), you can 'install' the packages from your local development environment.
To do this, you first run npm link in the directory of the package you want to install, so in \packages\comp1. Then in your testapp, run npm link comp1. This will install your package. Repeat for any others you want to install.
More info:
https://docs.npmjs.com/cli/v6/commands/npm-link
https://classic.yarnpkg.com/en/docs/cli/link/
To import a file directly without using npm link or yarn link you have to prepend the path with file:. And I believe you would have to pack each file, but you can link directly to the path without packing it as well. Make sure to build it if you are linking directly to the local package folder.
For your example:
"comp1": "file:../monorepo/comp1.tgz",
"comp2": "file:../monorepo/comp2.tgz",
"comp3": "file:../monorepo/comp3.tgz",
or
"comp1": "file:../path/to/monorepo/packages/comp1",
"comp2": "file:../path/to/monorepo/packages/comp2",
"comp3": "file:../path/to/monorepo/packages/comp3",
After some research I've found that https://verdaccio.org/ is the best tool to test a library without deploying to an npm repository
I am developing vue project and syncing dist folder with git. This worked well while using webpack. However, I have moved to #vue/cli --- using vue create myProject instead of vue init webpack myProj.
The issue is that every time i run npm run build, it deletes dist folder and recreates it -- all .git and other files gone.
How do I prevent new build from deleting required files in dist folder and only update the changes?
Assuming you have your own mechanism for cleaning up the old resources, vue-cli-service build comes with this option called --no-clean to instruct the compiler not to remove the "dist" directory before building the project.
So, add the switch/option to the build script on package.json:
{
"scripts": {
"build": "vue-cli-service build --no-clean"
}
}
Alternatively, if you use Yarn, you can pass additional argument(s) right after the script name. So there's no need to make any change to the script. To run it:
yarn build --no-clean
Thanks to answer by Yom S. the documentation here does provide way to keep older dist.
However, the you can't use --no-clean like npm build --no-clean. To use no clean mode from terminal you need to write following command instead
./node_modules/.bin/vue-cli-service --no-clean
Update
Instead you can also add --no-clean in package.json
I've been trying to add my React App project to Github Pages for a week. After all the prep work and everything that need to be done, I finally got it to show up, well kinda. It actually doesn't show anything, nor does it give me errors. Which leads me to believe that my script
<script src="../dist/bundle.js"></script>
is the culprit. However, the problem is I've never once used bundle.js. I wanted to learn how to use React without using create-react-app, and in doing so I seem to have gotten to far along in the game I'm not even sure how this is supposed to work.
Here is the Github Pages in it's current form
https://kevin6767.github.io/redux-api-opendota2/
EDIT: It now seems to be showing a 404. I'm not even sure why this is not working at this point. I've tried to many different methods.
I am not sure how you uploaded your React application to GitHub Pages, but, here, I will be mentioning the correct way to do it:
Step 1: Install gh-pages via the terminal, making sure you are in the correct file directory.
$ npm install gh-pages --save -dev (We are saving it as a dev dependency)
Step 2: Go to your package.json and add
"homepage": "<YOUR_GITHUB_USERNAME>.github.io/<REPO_NAME>," above the "name"
Step 3: In the "scripts" section of package.json, add
"predeploy": "npm run build", "deploy": "gh-pages -d build",
Step 4: Assuming that you have already committed and pushed your code to your Git Repo, now, in the terminal, use the command npm run deploy to see the changes in your GitHub Pages.
Also, make sure that in your source code, you have set the same route for the homepage as in the package.json.
While in the process of updating an Angular app I and colleagues are working on, I ended up running "npm update" when I meant to run "npm install". Doing so led me on a bit of a rabbit trail because of course now all my dependencies - AND their dependencies got updated in the process. From there I had to resolve certain conflicts to get the new versions to work correctly. However, this also led me to a point where a bug in one of those dependencies is preventing my app from booting up. According to the the Angular github repo, the issue is being worked on.
My question is, how can I revert to my previous setup in the meantime? I tried copy and pasting the package.json file as it originally existed before my "npm update", deleting my "node modules" folder, and running "npm install" again. But this doesn't resolve the issue. Is there a way I can be assured of reverting to my previous working setup?
The process you described should work:
Get an old copy of your package.json from your repository at the state you know it worked
Run rm -rf node_modules to remove the node_modules folder
Run npm install to install again
If that didn't work, verify that you:
are in the correct directory (that should contain package.json and node_modules)
have permissions to clean the node_modules folder (chmod 777 node_modules)
the package.json that is written in the file system is actually the restored one (sometimes an IDE or Git can create a weird shadow copy where you think it's one way, but it's really another). You can tell this by using cat package.json and inspecting the output