问题
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?
thanks
回答1:
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.2" 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.
回答2:
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,
回答3:
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:
https://github.com/facebook/create-react-app/issues/10062
https://github.com/facebook/create-react-app/issues/9887
回答4:
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.
回答5:
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'
})
}
}
})
回答6:
you can disable no-unused-vars eslint rule or change the rule level to warning instead of error.
More information here: https://eslint.org/docs/rules/no-unused-vars
回答7:
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
回答8:
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,
}
回答9:
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.
see also documentation here and here
来源：https://stackoverflow.com/questions/64518226/my-create-react-app-is-failing-to-compile-due-to-eslint-error