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:

1. Delete package-lock.json (not package.json!) and/or yarn.lock in your proje ct folder.
2. Delete node_modules in your project folder.
3. Remove "babel-loader" from dependencies and/or devDependencies in the packa ge.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 st eps with it instead. This may help because npm has known issues with package hoisting which may get resolved in future versions.

6. 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.

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

Answer 1

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

Answer 2

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 node_module directory and pack-lock.json file in your project, and run npm install again. Then it should work.

Answer 3

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"

Answer 4

Just add an optional dep in your package.json:

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

...and run npm i or yarn again.

Answer 5

SKIP_PREFLIGHT_CHECK=true works fine!

Answer 6

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:

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

Answer 7

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.

Answer 8

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.

Answer 9

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.

Answer 10

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.

Answer 11

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

Answer 12

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.