ISSUE: You scaffolded out a React app with create-react-app. One day you go to start it and you get a looong error message. The first part looks something like this:
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\whatever-your-username-is\node_modules\babel-jest (version: 26.6.1)
It might not be about babel-jest in your case, it might be babel-loader or webpack-dev-server or something else. The version numbers may be different from what you see above. Whatever the case, look at the bolded part above in your error message and find the corresponding part in your error message, after “However, a different version of _____ was detected higher up in the tree:”.
Does it say
(for Windows):
C:\Users\whatever-your-username-is\node_modules
(for macOS/Linux):
/Users/whatever-your-username-is/node_modules
followed by \babel-jest or \babel-module or whatever?
That means you accidentally installed an NPM package in your user’s home folder (that’s C:\Users\whatever-your-username-is for Windows, /Users/whatever-your-username-is for macOS). That is, from a command prompt, you used the ‘npm install’ or ‘npm i’ command while in your home folder. There is no reason to ever do this, unless it is a global install, which can be made from any folder.
Your home folder is not an NPM project and there is no reason to install NPM packages to your home folder. Doing this is what created the node_modules folder.
Luckily, the fix is generally easy, assuming that you installed something to your home folder by mistake and you weren’t really trying to use your home folder as a project folder. Delete the node_modules folder that’s inside your home folder, and try starting your React app again.
For good measure, you should also make sure to delete the dependency lockfile (package-lock.json if you used npm, yarn.lock if you used yarn) in your home folder. If there is a package.json file in your home folder, you should delete it, or if you think it might be important, move it to another folder.
If you’re looking for a more in-depth discussion of why create-react-app throws an error when it finds a conflicting version in a parent directory’s node_modules, this is the most complete one that I have found: https://github.com/facebook/create-react-app/issues/4167
Note: I am a web development curriculum developer. I spend a lot of time helping students new to coding/web development. I see a lot of the same issues over and over. I’m going to collect some of them here for a moment.
