Create React App requires a dependency: "babel-loader": "8.1.0"

Question

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 locall y.

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:

D:\Reactjs\node_modules\babel-loader (version: 8.0.6)

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 .e nv 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 proje ct folder.
Delete node_modules in your project folder.
Remove "babel-loader" from dependencies and/or devDependencies in the packa ge.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 st eps with it instead. This may help because npm has known issues with package hoisting which may get resolved in future versions.
Check if D:\Reactjs\node_modules\babel-loader is outside your project direc tory. For example, you might have accidentally installed something in your home f older.
Try running npm ls babel-loader in your project folder. This will tell you which other package (apart from the expected react-scrip ts) installed babel-loader.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your pro ject. That would permanently disable this preflight check in case you want to proceed anyway.

Does this answer your question? [NPM start returns error, "There might be a problem with the project dependency tree"](https://stackoverflow.com/questions/56528222/npm-start-returns-error-there-might-be-a-problem-with-the-project-dependency-t) — Henke, Mar 18 '22 at 14:51

Tumi-D · Answer 1 · 2020-05-25T08:19:08.113

11

Please if you haven't already, try the troubleshooting guide. If that fails too create a .env file in your root directory add SKIP_PREFLIGHT_CHECK=true and relaunch with npm start. If that doesn't help either just use yarn instead. It should work. For most people deleting the node_modules folder and reinstalling solves the issue.

npm i yarn -g

edited May 25 '20 at 08:19

answered May 23 '20 at 13:12

Tumi-D

119
6

6

you think this is reasonable or logical solution? the error is saying that it may develop other bugs – Emad Baqeri Jun 21 '21 at 17:01

score 8 · Answer 2 · edited Nov 15 '22 at 00:06

8

You may have previously installed a project in your user folder. Check for a node_modules directory and package-lock.json in your user root.

You can remove them using:

rm -rf ~/User/node_modules
rm -rf ~/User/package-lock.json

After that delete the node_modules directory and package-lock.json file in your project and run npm install again. Then it should work.

edited Nov 15 '22 at 00:06

Andris

5,853
3
28
34

answered Jul 18 '20 at 10:42

Yesith

660
4
10

5

I have done these steps but the error persist, any other solution for this issue? – Emad Baqeri Jun 21 '21 at 17:00

score 7 · Answer 3 · answered Jul 30 '21 at 11:52

7

Just add an optional dep in your package.json:

"optionalDependencies": {
  "babel-loader": "8.1.0"
},

...and run npm i or yarn again.

answered Jul 30 '21 at 11:52

Nickon

9,652
12
64
119

score 4 · Answer 4 · answered Jan 08 '21 at 10:37

4

To avoid adding the SKIP_PREFLIGHT_CHECK flag try removing the caret from babel-loader in package.json to lock the version.

"babel-loader": "^8.1.0"
to
"babel-loader": "8.1.0"

answered Jan 08 '21 at 10:37

Calabi

41
1

score 4 · Answer 5 · answered Mar 31 '21 at 09:05

Posting just in case this helps someone else.

I had cloned a repo to my system and done npm install but was getting the above error when I tried to run npm run start. I did not have any node_modules in the parent folder, I tried deleting my node_modules and package-lock.json and doing npm install again but it did not work.

I found that I had an older version of a package (quill-magic-url) that was required babel-loader@^7.1.5. So when I did npm install it was installing 7.1.5. I upgraded that package and BOOM it worked.

PS I did a 'find in all files' search in VS Code to find where babel-loader was used. That is where I found the rogue version.

score 3 · Answer 6 · answered Oct 06 '21 at 18:29

3

I fixed this by adding babel-loader to the peer dependencies in my package.json file:

"peerDependencies": {
  "babel-loader": "8.1.0"
}

This way I don't have to skip preflight checks (by adding the SKIP_PREFLIGHT_CHECK environment variable) nor do I have to install babel-loader as an explicit dependency.

answered Oct 06 '21 at 18:29

Andris

5,853
3
28
34

1

This one worked well for our project. Thank you Andris. – iarobinson Nov 05 '21 at 19:21
After playing whackamole with dependencies all day, I found this solution actually worked. Though I needed to include both peerDependencies and otherDependencies in both my project folder and my react subfolder/project. – JessycaFrederick Dec 20 '21 at 00:32

score 2 · Answer 7 · answered Sep 15 '20 at 05:58

2

SKIP_PREFLIGHT_CHECK=true works fine!

answered Sep 15 '20 at 05:58

Didierh

374
3
8

4

This does not solves the issue, it just bypass it – theKid Sep 08 '21 at 01:17

CaptainGenesisX · Answer 8 · 2021-02-09T17:59:27.207

Not sure if this will help anyone, but I ran into this exact error. The cause of the problem was that I had a node_modules folder at the root of my C drive. It was in c:\node_modules. My project, which was buried deep in another directory, still saw that c:\node_modules folder and was looking at that. So this is what I did:

Deleted the node_modules folder on the root of C.
Deleted node_modules folder from my project
Deleted package-lock.json file from my project
Re-ran npm install from the terminal (make sure you're in your profile folder).
Ran npm start from the terminal.

score 2 · Answer 9 · answered Nov 18 '21 at 10:04

In my case it happened after I added Storybook to my React project, then the React project would not start.

I've added a dependency in my package.json:

"dependencies": {
  "babel-loader": "8.1.0"
}

and then run yarn install again.

Both React app and Storybook work just fine.

score 1 · Answer 10 · answered Feb 14 '21 at 12:42

I had this and solved it myself. In my case, it was something really weird. I had had a React project in the directory 'above' my current project. I.e. the project that was giving me this problem, call it 'current'. File structure:

C://path/to/folder/parent/current

But I had another project in the 'parent' folder, in other words, a node_modules folder one directory out of the current project. I eventually deleted everything in the parent folder, and then the error stopped.

score 1 · Answer 11 · answered Apr 04 '21 at 01:50

This error means that you have a dependency installed that clashes with CRA’s list. You simply need to follow the list of instructions they provide to remove it.

You can also use npm ls dependency_name to see all installed versions. In your case it’s “babel-loader”.

Once you find that multiple versions are installed as indicated in the message, simply uninstall the wrong version: npm uninstall dependency_name. You can add “@version_number” to the end to uninstall the specific version you need to uninstall.

Tawfeeq Amro · Answer 12 · 2023-03-21T15:27:16.820

1

The problem caused because you have a babel-loader inside your node_nodules that conflict with react-script babel!! , you need to go to node_nodules and delete folder babel-loader.

So the steps:

Remove babel-loader form package.json.
Go to node_nodules folder and remove babel-loader.
press npm build or yarn build to build your application.

Agian!!...Don't try to install it manually: your package manager does it automatically.

edited Mar 21 '23 at 15:27

answered Dec 29 '21 at 07:33

Tawfeeq Amro

605
7
15

This helped me today. I was following all the steps in order for removing the package.json lock and then node modules. nothing worked. after I did npm install I went in and removed the babel-loader like you said and my build worked. My issue was caused from installing new node.js version while using and old react app – KingJoeffrey Mar 18 '23 at 20:32

Mustafa Karataş · Answer 13 · 2021-05-12T06:56:27.353

0

I solved this problem with:

terminal:

truffle develop
compile
develop
( client-node_modules--> delete the 'babel loader' folder)

another terminal:

cd client
react-scripts start

edited May 12 '21 at 06:56

answered May 12 '21 at 06:50

Mustafa Karataş

11
3

score 0 · Answer 14 · answered Dec 14 '22 at 08:12

0

In my own case, I had removed my yarn.lock from my project files unknowingly. Adding yarn.lock fixed the issue for me.

answered Dec 14 '22 at 08:12

Adebowale Adebusuyi

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 17 '22 at 17:32

Create React App requires a dependency: "babel-loader": "8.1.0"

14 Answers14

Linked