After updating to CRA 5.0.0, I got this error on compilation process:
ERROR in Plugin "react" was conflicted between ".eslintrc.json" and "BaseConfig » "..\react-app\node_modules\eslint-config-react-app\base.js".
My eslint configuration is:
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"airbnb",
"plugin:react/jsx-runtime"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {...}
}
Any solutions/fixes?
The problem :
eslint-plugin-react
version in your project's dependency is "different" from the one in eslint-config-react-app
package's dependency, hence "conflicting".
The solution :
Avoid deleting the .lock
file as many suggested here ( it's there for a reason ). Instead, dedupe its entries and then re-install.
npm :
npm dedupe && npm i
yarn :
npx yarn-deduplicate && yarn
Well, this seems to be related to one of the following issues.
https://github.com/yannickcr/eslint-plugin-react/issues/3128
https://github.com/facebook/create-react-app/issues/10463
What you can try is the following (if the first one does not work, try the second one, if you are using yarn):
pnpFallbackMode: all
to .yarnrc.yml
file, if you are using yarn, as explained here https://github.com/facebook/create-react-app/issues/10463#issuecomment-997378138 In addition, take a look the CRA release notes to check if some action is required, especially the part about "Migrating from 4.0.x to 5.0.0" , you may need to update react-scripts
as well.
https://github.com/facebook/create-react-app/releases/tag/v5.0.0
This probably won't help OP, but in my case, I'd updated my react app to MUI 5 and eslint from ^7.32.0
to ^8.7.0
but I forgot to upgrade eslint-plugin-react
and eslint-plugin-react-hooks
and the above error was happening on file change on reload. Upgrading them to ^7.28.0
and ^4.3.0
respectively fixed my problem.
I just ran the npm install --dev eslint-config-react-app
command and the error is gone. Also use --include=dev
instead of --dev
.
also install dev dependencies with below command:
npm install --save-dev eslint-config-react-app eslint@^8.0.0
Then create a file named .eslintrc.json
with following contents in the root folder of your project:
{
"extends": "react-app"
}
Source https://www.npmjs.com/package/eslint-config-react-app
What solved this for me was making sure that the path I cd into from the terminal has the same exact capitalization as the real path.
I think it's because of not an updated eslint. Just changing the eslint version to 8.0.0 from 7.0.0 in your package.json worked for me or you update in your cli using npm.
from package.json I removed:
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}
Then, I restarted the server with npm start
and my web app is working again.
Hope it can help
I just tried to use your config in my project (which is working with CRA 5.0.0) and didn't receive this error. I think the problem is that you didn't update one or several eslint-related packages. You can try to update them:
yarn add -D \
eslint@^8.6.0 \
@typescript-eslint/eslint-plugin@^5.9.0 \
@typescript-eslint/parser@^5.9.0 \
eslint-plugin-react@^7.28.0 \
eslint-config-react@^1.1.7 \
eslint-config-airbnb@^19.0.4
or npm install
instead of yarn add
if you are using npm
I've just downgraded eslint-config-react-app
from version 7.0.0
to 6.0.0
:
yarn add --dev eslint-config-react-app@6.0.0
or
npm install --dev eslint-config-react-app@6.0.0
Maybe this will help someone.
For me it worked after updating
"eslint-plugin-react": "7.29.4",
"eslint-plugin-jsx-a11y": "6.5.1"
removing package-lock.json
and node_modules
and reinstalling the package.
Simply updating eslint-plugin-react from version 7.28.x to 7.29.x worked for me
Before trying the previous responses. just open your package.json
file and save it by Cntrl + S
and run your app again it worked for me.
If using yarn, delete your yarn.lock
and run:
yarn install
This will rebuild the.lock file and the error will go away.
I was able to fix this issue by the use of env variables.
I installed eslint as a dev-dependency (as well all any other plugins you that i use).
To get your code to lint, but not fail, in development, add this to your.env.development: ESLINT_NO_DEV_ERRORS = true
To completely disable eslint on a production build, add this to your.env.production: DISABLE_ESLINT_PLUGIN = true
What's terminal do you use? I don't recommend Windows PowerShell. Use the PowerShell new version and will works fine.
Today i ran into the problem and after i ran an audit fix--force the npm start didnt work but i got a lovely long message which explains the steps and also the reason behind this. I found it helpful and fixed my problem.
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:
"eslint": "5.6.0"
Don't try to install it manually: your package manager does it automatically. However, a different version of eslint was detected higher up in the tree:
C:\Users\rohad\Desktop\project\node_modules\eslint (version: 8.10.0)
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 "eslint" 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\rohad\Desktop\project\node_modules\eslint is outside your project directory. For example, you might have accidentally installed something in your home folder.
Try running npm ls eslint in your project folder. This will tell you which other package (apart from the expected react-scripts) installed eslint.
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.
PS We know this message is long but please read the steps above:-) We hope you find them helpful!
In my case, everything was updated to the latest version, but still I got the same error.
After I deleted the lock file it started working
I got this issue because I got duplicate and not coherent declarations in both .eslintrc.yml
and package.json
. It seems that updating to CRA 5.0 added back in package.json the following:
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
Strange tbh.
What I recently did and it works 100% is to create a new reat-app project (using CRA 5+), and move all the files and configurations inside that new folder.
This is the solution that worked for me.
Removing the lock file only may not work for you. You just need to remove some of the packages from eslint.
So here is my list of dev dependencies in package.json which was causing the same error.
"devDependencies": {
"@babel/eslint-parser": "7.17.0",
"@babel/preset-react": "7.16.7",
"eslint": "8.14.0",
"eslint-config-airbnb": "18.2.0",
"eslint-config-prettier": "8.5.0",
"eslint-plugin-html": "6.2.0",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-jsdoc": "39.2.8",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-prettier": "4.0.0",
"eslint-plugin-react": "7.29.4",
"eslint-plugin-react-hooks": "4.4.0",
"eslint-plugin-testing-library": "5.3.1",
"husky": "7.0.4",
"lint-staged": "12.4.0",
"prettier": "2.6.2"
}
and after removing which were not needed, here is the list of dependencies which worked for me
"devDependencies": {
"@babel/eslint-parser": "7.17.0",
"@babel/preset-react": "7.16.7",
"eslint": "8.14.0",
"eslint-config-airbnb": "18.2.0",
"eslint-config-prettier": "^8.5.0",
"eslint-config-react-app": "^7.0.1",
"eslint-plugin-html": "^6.2.0",
"eslint-plugin-jsdoc": "^39.3.0",
"eslint-plugin-prettier": "^4.0.0",
"husky": "7.0.4",
"lint-staged": "12.4.0",
"prettier": "2.6.2"
}
good luck
I kept running into this compilation error while deploying to Vercel. You can solve the issue by deleting.eslintrc file and then remove this part from your package.json: "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] },
Tried a lot of solutions, but in the end, disabling ESLint inside CRA solved it for me. I use ESLint in the IDE anyway, so don't need it there as well.
This other thread helped: https://stackoverflow.com/a/70830899/5613884
I was using eslint-config-import which was causing the same problem with me, just remove it and everything going to work fine. so I think that (react/jsx-runtime) may the cause of the problem
It works fine for me when I add root: true
inside the.eslintrc.JSON file.
This link may help you more Click here
This is not a big error you just need to run this command npm install --prefer-dedupe
or You can also run this command npm config set prefer-dedupe true
and your error will be solved. You might be thinking about prefer
this is nothing this is just for the version. you can run like this also npm install dedupe
by default it will install the new version okay!
I hope you solved your error after this answer.
Removing "plugin:react/recommended" and/or "plugin:react/jsx-runtime" from "extends"
should fix it.
I tried running npx yarn-deduplicate && yarn
as suggested by @glenn-mohammad, put I only got SyntaxError. If you use yarn 2, try instead to run
yarn dedupe
See https://yarnpkg.com/cli/dedupe for docs.
First time I ran it, I ran it on all packages, and it caused a new error with babel. If that happens to you, try instead to run it only on the packages with issues.
The issue I was facing is a bit different but I am going to post this answer here because the google search for my issue takes me to this page:
Short answer:
Watch for casing differences in the folder structure, if the project is inside a .net project.
Long answer
The set up:
We have a react app using create react app hosted inside a .net core project. So when a run project build is done for the first time visual studio runs npm install and then npm start. The page opens up and an error is thrown
The error:
[eslint] Plugin "react" was conflicted between "package.json » eslint-config-react-app » C:\test folder\New folder\src\WatchCasing\ClientApp\node_modules\eslint-config-react-app\base.js" and "BaseConfig » C:\test folder\New folder\src\watchCasing\ClientApp\node_modules\eslint-config-react-app\base.js".
Look at the "watchCasing" folder name its different, one is WatchCasing and the other is watchCasing. I obviously missed this casing difference until I read this github answer: github answer
Cause and solution:
Root cause of the issue was that the solution file(.sln) had the wrong casing(because some one did an improper rename) but the project built fine since windows treats file as case insensitive.
The problem was solved by fixing the casing in the solution file to match the casing of the actual folder in the project section.
Project("{project-guid}") = "project.name", "watchCasing\project.name.csproj", "{different-guid}"
EndProject
Using the correct capitalization to cd in from is what worked for me.
IE If real path is /Documents/Websites/EXAMPLE/ex1 then don't cd in with /Documents/Websites/example/ex1
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.