Steps I have done:
Cloned project from github.
Ran command 'yarn' to start project.
After running command 'yarn start' then this error comes.
after doing steps given in error, shows same error again
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"babel-loader": "8.1.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-loader was detected higher up in the tree:
C:\Users\Prathmesh Pawar\node_modules\babel-loader (version: 8.2.5)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if C:\Users\Prathmesh Pawar\node_modules\babel-loader is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls babel-loader in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-loader.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!```
Try what the error message suggests:
To fix the dependency tree, try following the steps below in the exact
order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
I've tried installing jest for testing react apps
After installing them with yarn, I'm unable to start my react app any way
I'm getting the below message, but it didn't work.
There might be a problem with the project dependency tree. It is
likely not a bug in Create React App, but something you need to fix
locally.
The react-scripts package provided by Create React App requires a
dependency:
"babel-jest": "^24.9.0"
Don't try to install it manually: your package manager does it
automatically. However, a different version of babel-jest was detected
higher up in the tree:
C:\Users\YV\node_modules\babel-jest (version: 27.0.5)
Manually installing incompatible versions is known to cause
hard-to-debug issues.
If you would prefer to ignore this check, add
SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That will
permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact
order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "babel-jest" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem. If this has
not helped, there are a few other things you can try:
If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
Check if C:\Users\YV\node_modules\babel-jest is outside your project directory.
For example, you might have accidentally installed something in your home folder.
Try running npm ls babel-jest in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-jest.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file
in your project. That would permanently disable this preflight check
in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-)
We hope you find them helpful!
I just had the same issue and fixed it. So, you probably installed jest globally on accident. In doing so, it likely ended up installed inside of users/yourname/node-modules/. If you can pull up a terminal, try doing a cd into node-modules from your home folder then do a ls -a. If you see babel-jest, do a rm -r babel-jest and rm -r jest. This fixed the problem for me. I'm running Linux, but the same strategy should work on Windows (not sure if the commands are exactly the same).
You probably installed a different global (npm install -g) version that is currently conflicting with the one you installed in your project.
You can quite literally delete the folder babel-jest inside C:\Users\YV\node_modules\ and try again. I would assume you're doing this by using create-react-app. Rest assured that Jest is already part of the installed dependencies (hence the message pointing to package-lock.json).
I know there are numerous issues about this, and I discovered the command npm ci that is supposed to not change package-lock.json, but when I run npm ci it fails:
ERR! cipm can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
Also tried another solution involving deleting my node_modules directory and running npm i again, but that's not changing the outcome.
I'm a junior dev working with a team remotely.. I was given a task, so I created a new branch on Gitlab, pulled it down to my local machine and ran npm i to get up-to-speed...
But it keeps changing my package-lock.json DRAMATICALLY(it adds like 20,000 lines of code)
Committing that to the team's project seems insane to me. Anyone have advice?
Update: OP wound up needing to make use of yarn which their team and project made use of. If anyone finds a yarn.lock in their project root, this is an indication that yarn is involved and any package-lock.json, if there is one, is possibly outdated.
TL;DR: it sounds like the package-lock.json needs some updates and resolution, which is done primarily with npm install.
It sounds like the package-lock.json no longer "agrees" with your package.json. It also sounds like others on your team are avoiding committing the changes to your package-lock.json; this is a bad practice in my experience as it only deepens any divergence in their contents. Over time they can be out of sync when dependencies of dependencies may publish a bug fix release and potentially un-publish a previous version.
As a junior dev on this team, I would bring this up to your development/team lead and ask their preferred approach here. If there was a major dependency intentionally removed and that has a lot of its own dependencies, it could cause a large removal of lines from package-lock.json and look severe to one less accustomed to it.
Extra context:
During an install, npm installs the dependencies and development dependencies listed in your package.json. In the process it's possible and increasingly likely over time, that some of the dependencies of those dependencies, which are needed to execute, will overlap and often with conflicting versions. The execution of npm i(nstall) will attempt to reconcile all these competing versions of sub-dependencies for you.
In a Continuous Integration context, it is desirable for the alternate command npm ci to be used, which explicitly installs only what's resolved already, from package-lock.json (the formerly known as "shrinkwrap"). This is meant to reduce the "but it works on my machine!" moments. As a developer, I've found it to be preferable to use npm install, as this alerts the developers more quickly to any dependency resolution issues and keeps the package-lock.json up to date.
Since this post got so many views I thought I'd come back and post what I found.
Yarn and NPM both update and install packages and dependencies, but the difference is:
yarn creates a file called yarn.lock
npm install creates a file called package-lock.json.
I didn't know this at the time, so when I cloned the project repo to my local machine, I ran npm i which created the package-lock.json. My teammates were already using yarn, however.
So make sure you use the one already being used.
Some background:
I started my project with a clone of this repository. Here's an example of the code. After some time, I realized that the vue-cli-service it used appeared to be old. (They even renamed it to '#vue/cli-service'). So, I ran npm update. The code has me use npm run serve to start the service. It's apparently equivalent to npx vue-cli-service serve. When I did that, it couldn't load some bootstrap stuff. I reinstalled bootstrap (npm install bootstrap#version (don't have access to the exact line I used). It then said it couldn't find '#vue/cli-plugin-babel'. I saw it right in the node_modules folder.
I fixed it using this process:
I ran npm update.
It first said that it could not find a font (no longer have the specific details). The error directed to the bootstrap.css file.
I reinstalled bootstrap.
I run npm run serve, and it says "Cannot find module '#vue/cli-plugin-babel'"
I see '#vue/cli-plugin-babel' showing in the node_modules folder
I run npm list --depth=0, and '#vue/cli-plugin-babel' does not show up.
I*’m seeing this
npm cache clean --force alone did not cause the site to resume. It still said “ Cannot find module '#vue/cli-plugin-babel'”.
Following the top SO answer here got my site to work again.
rm -rf node_modules/
npm cache clean (then replaced with npm cache verify on npm's prompt)
npm install (I wonder if it was possible to ignore ‘rm -rf node_modules/’ and just do the last two steps).
I run npm run serve, and the site works again.
After running npm list --depth=0 again, there are no more UNMET DEPENDENCY issues, like with #6.
Also on that SO Q&A, people talked about restructuring (reordering) the package.json file. In the top answer he says that a possible solution is to “Re-structure your package.json. Place all the high-level modules (serves as a dependency for others modules) at the bottom.”. I wonder if that relates to my issue.
My expected vs. actual results:
When I updated it, I actually sort of expected it to break. I got that.
But what I also expected was:
If the node module is there, it will not give me an error.
If I run npm install, all dependencies will be handled automatically.
If npm install doesn't do the trick, then npm cache clean --force should do the trick. (Note: I later learned about npm cache verify).
I got:
The '#vue/cli-plugin-babel' module was there and it gave an error saying it couldn't find it.
(And also 3.) Running npm install and npm install [unmet-dependency] did not work until after 'rm -rf node_modules/' -> `npm verify cache' and THEN -> 'npm install'.
Here are my guesses:
#vue/cli service doesn’t check the folders directly to see if a module exists (75% chance it’s true)
#vue/cli service uses a proxy, something like the packages.json file (but different) to see if a node exists (40%).
#vue/cli service caches commonly used stuff. So, when I ran it again after the update, it didn’t check the new stuff in my folder, it checked its cache. It didn’t line up. (10%).
For everything above, replace #vue/cli service with npm (10%).
Again, my biggest question is "How could the vue-cli-service crash because of the '#vue/cli-plugin-babel' module, if the node module is there?"
And "How did removing the node_modules folder, verifying the cache, and reinstalling with npm cause npx vue-cli-service serve to successfully run my site again (and find #vue/vue-plugin-babel)?".
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.