Unable to setup a react project

Question

I am not sure why but I am getting a babel dependency related error:

> yarn start yarn run v1.22.10 $ react-scripts start
> 
> 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-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:
> 
>   /Users/ri/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 .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 /Users/ri/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!

I read other solutions for this issue and performed the solution stated in this: Problems with babel loader in react-create-app

I tried the following:

1. Deleting node modules, package.json.lock and yarn.lock file
2. I tried to delete the dependency of babel in package.json too.
3. Tried the steps mentioned in both the Stackover flow link
4. Even tried creating new react project entirely twice but I still get the same issue of babel. I am using yarn 1.22.10.
5. I have even tried updating react-scripts to the latest.

When I try to use the command babel-loader --version, I get the following results:

my-app@0.1.0 /Users/ri/Desktop/my-app
└─┬ react-scripts@4.0.3
  └── babel-loader@8.1.0

I installed/ created react project by the following steps:

npx create-react-app my-app
cd my-app
yarn start

Can someone help to why this issue still persists?

Answer 1

I solved it just like how @jonrsharpe mentioned in his comment. The paths were incorrect. I navigated to the path (/Users/ri/node_modules/babel-loader)and deleted the babel-loader folder. Then it started complaining about webpack. So, I deleted the webpack folder too. Then I created a new React project using: npx create-react-app new-project followed by yarn start. I had no dependency related issue then and the development environment worked fine :)