My create-react-app is failing to compile due to ESLint error
ReactjsEslintReactjs Problem Overview
I just created a fresh template with create-react-app with react v17 included, and I installed eslint dependencies as I used to before, here's my package.json file
{
"name": "gym-nation",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.5",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.0",
"classnames": "^2.2.6",
"moment": "^2.29.1",
"prop-types": "^15.7.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-intl": "^5.8.6",
"react-redux": "^7.2.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.5.0",
"@typescript-eslint/parser": "^4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^7.12.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.14.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-testing-library": "^3.9.2",
"node-sass": "^4.14.1",
"prettier": "^2.1.2",
"react-app-rewired": "^2.1.6"
}
}
and here's my eslintrc.json: (note that i didn't add all the rules yet)
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["react-app", "prettier"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react", "prettier"],
"rules": {
"prettier/prettier": [
"error",
{
"printWidth": 140,
"singleQuote": true,
"editor.formatOnSave": true,
"arrowParens": "always",
"jsxSingleQuote": true,
"tabWidth": 2,
"trailingComma": "none"
}
],
"no-unused-vars": "error"
}
}
when I run the app will fail to compile due to this error:
Line 113:13: 'isLoading' is assigned a value but never used no-unused-vars
I've worked on previous projects and eslint errors were showing in the code without causing the app to crash. can anyone point where I messed up please?
Reactjs Solutions
Solution 1 - Reactjs
I have had the exact same errors when I created app using the create-react-app and setup the eslint for the application.
The eslint errors were showing up in the browser rather than in the console.
Once, I debugged all the dependencies. It seems that the react-scripts was causing the lint errors for me.
The newest version of the react-scripts:"4.0.0" may have some breaking changes which could be causing the eslint to throw the errors in the browser.
Solution:
This issue has been fixed in the react-scipts:"4.0.3" but, the eslint errors present in the project are not converted to warnings by default. You have to create an .env file which should contain a ESLINT_NO_DEV_ERRORS=true flag. Due to this flag, you will receive the eslint errors as warnings and not as errors in the development.
This flag is ignored during production and when they are any git hooks running, which will in turn cause an error when you are trying to commit the code with an eslint error in it.
Update 2:
Active Issue: https://github.com/facebook/create-react-app/issues/9887
Workaround for this issue until react-scripts:4.0.2 is released:
-
Install patch-package and postinstall-postinstall as dev dependency .
-
Go to node_modules/react-scripts/config/webpack.config.js and make the following changes
-
Once done with the edit,run yarn patch-package react-scripts. This will create a patches folder, with the dependency patch in it.
-
Now, as we don't want do this every time while installing the dependencies. We are going to add another script to our package.json file.
"postinstall":"patch-package".
> This above script will run every time when we install the dependencies. Just keep in mind that you will also have to push packages folder to your repo. If you need the changes, also while deploying the app.
Thanks to @fernandaad for providing this workaround.
Update 1:
Had to downgrade to react-scripts:3.4.4 version because there is no workaround available right now. Now, errors were being thrown in the console rather than in the browser.
- Delete the node_modules and package.lock/yarn.lock.
- Downgrade react-scripts from 4.0.0 to 3.4.4.
- Install the dependencies and start the app.
Solution 2 - Reactjs
I was able to fix it using env variables, since I'm not using webpack.
Make sure you're using the VSCode extension and that you installed eslint as a dev-dependency (as well as any other plugins you might need).
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
After that, it should not fail any build. I don't understand why eslint should fail builds. It's there to help us keep code quality up, but not necessarily enforce it.
Solution 3 - Reactjs
it took me some hours to find possible solutions:
1- workaround: add rules inside the package.json file
"eslintConfig": {
"extends": ["react-app"],
"rules": {
"no-unused-vars": "warn"
},
"overrides": [
{
"files": ["**/*.ts?(x)"],
"rules": {
"max-len": "warn"
}
}
]
},
2- you can use a .eslintrc.js file, by adding .env file in the root folder with following content:
DISABLE_ESLINT_PLUGIN=true
ESLINT_NO_DEV_ERRORS=true
-
DISABLE_ESLINT_PLUGIN- will disable eslint-webpack-plugin in the Development and Production. - this is a must.
-
ESLINT_NO_DEV_ERRORS - will convert ESLint errors to warnings during development. As a result, ESLint output will no longer appear in the error overlay. this alone won't fix the bug.
Solution 4 - Reactjs
The genius developers arround react-scripts decided to turn warnings into errors once CI=true is present. Therefore the only way to fix that is using CI=false for your command or make your eslint run warning free. There is no point to suggest eslint rules here cause yet another warning caused by your codebase or custom ruleset might trigger that issue.
Adjust your scripts block in package.json:
"scripts": {
"start": "CI=false react-app-rewired start",
"build": "CI=false react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
Or run it that way:
CI=false npm run start
CI=false npm run build
See related issues on GitHub:
Solution 5 - Reactjs
For Next.js
Open next.config.js and enable the ignoreDuringBuilds option in the eslint config:
module.exports = {
eslint: {
ignoreDuringBuilds: true
}
}
Solution 6 - Reactjs
For a temporary workaround, use .eslintrc.js so that you can check your current node environment and set rules accordingly. E.g:
const isProd = process.env.NODE_ENV === 'production';
const warnDevErrorProd = isProd ? 2 : 1;
{
...
"rules": {
...
"prettier/prettier": warnDevErrorProd,
"no-console": warnDevErrorProd,
...
}
...
}
This way you don't need to eject in order to modify your webpack config to change the rules there.
Solution 7 - Reactjs
This Compiled with problems can also solved to add this in the .env file. I face the prolem and try to solve it using this line od code.
SKIP_PREFLIGHT_CHECK=true
or
ESLINT_NO_DEV_ERRORS=true
SKIP_PREFLIGHT_CHECK=true or ESLINT_NO_DEV_ERRORS=true
Solution 8 - Reactjs
When I upgraded my create-react-app to v4, it was intimidating to see pages of eslint issues -> errors preventing my app from compiling. Not the immediate experience I was expecting using react's fast-refresh :). The change in rules (and error levels), in Eslint 7 are surely the cause. Although, how the transpiling process started to care about prettier/prettier issues that were previously limited to my linter, remains unclear to me.
Update
There are a few things going on. The Eslint changes (and any extensions such as airbnb) are likely shaking up my mix of errors and warnings, but likely most relevant: CRA v4 no longer uses its own eslint rules, but rather that of the project, i.e., the linting rules used in my editor. Prior to the upgrade, CRA's use of the project rules was enabled using EXTEND_ESLINT. This register is now on by default and no longer something I can set with env in v4 (in my experience anyway).
Regardless, the quick-fix to get the app to transpile was as follows:
git commitmy latest changes- run prettier cli:
yarn prettier --config ./.prettierrc --write '**/*.{js|jsx}' - one by one, created a new entry in my
.eslintrcto set the blocking error to'warn'; e.g., added'no-param-reassign': 'warn'(something I often do in my.reduceroutines).
All in all, the process took me about 5 min.
This got me to a place where I could compile the app whilst giving me time to work through/prioritize what makes sense in this fast-refresh, non-ejected CRA, Eslint v7 version of the app.
- E
Solution 9 - Reactjs
You can add two properties to ESLintPlugin method, inside node_modules\react-scripts\config\webpack.config.js for your project.
failOnError: false, emitWarning: true,
new ESLintPlugin({
// Plugin options
extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
context: paths.appSrc,
cache: true,
failOnError: false,
emitWarning: true,
// ESLint class options
cwd: paths.appPath,
Solution 10 - Reactjs
I had a same problem
this problem have a open issue in CRA (version 4.0) on github
I found a temporary solution for this
- delete
node_modules - change
React-Scriptsversion form4.0.0to3.4.4 - add this
SKIP_PREFLIGHT_CHECK=trueinto.envfile - run
npm install - hope enjoy :)
PS : if .env file dose not exist on your project you can create that in root folder
Solution 11 - Reactjs
I had this same error and here is what worked for me.
Along with the error I got the following suggestions in the terminal when I wanted to create an app.
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 "eslint" 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.
I did all 3 above. Then I did the following-
I uninstalled eslint
npm uninstall -g create-react-app //uninstall create react app
npm install eslint --save-dev //reinstalled eslint
npm install -g yarn //installed yarn because I was using npm
used yarn to install create react app
yarn create-react-app nameofapp //used yarn to create a new app
when I did npm start, it worked as it seems like yarn was working to patch up/work through the problems.
I had to do a bit of trial and error here but finally it worked. I am no expert so did not really understand what exactly happened under the hood but this worked for me as yarn took care of the eslint problem.
Solution 12 - Reactjs
Replace the third last line in your .eslintrc.json file
"no-unused-vars": "error"
with
"no-unused-vars": "warn"
I expect that change to result in a warning instead of an error.
Don't forget to restart your text editor or IDE!
Disclaimer
From what I can read in your question, I believe my tip should help.
But I haven't tried it myself.
Solution 13 - Reactjs
since eslint-loader is now deprecated and eslint-webpack-plugin is now used in create-react-app check the docs, I was able to solve a the issue by adding two options to the eslint-webpack-plugin
after ejecting your react app, add these options to the ESLintPlugin options:
new ESLintPlugin({
// Plugin options
extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
context: paths.appSrc,
failOnError: false, <== `This one`
emitWarning: true, <== `And this one`
// ESLint class options
cwd: paths.appPath,
resolvePluginsRelativeTo: __dirname,
baseConfig: {
extends: [require.resolve('eslint-config-react-app/base')],
rules: {
...(!hasJsxRuntime && {
'react/react-in-jsx-scope': 'error'
})
}
}
})
Solution 14 - Reactjs
in module.rules modify following rule to have
failOnError: false,
emitWarning: true,
{
test: /\.(js|mjs|jsx)$/,
enforce: 'pre',
use: [
{
options: {
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
failOnError: false,
emitWarning: true,
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
}