由于ESLint错误，我的create-react-app无法编译 [英] My create-react-app is failing to compile due to ESLint error
问题描述
我刚刚使用包含 react v17 的 create-react-app 创建了一个新模板，并且像以前一样安装了eslint依赖项，这是我的package.json文件
{名称":"gym-nation"，版本":"0.1.0&"，私人":是的，依赖项":{"@ testing-library/jest-dom":"^ 5.11.5"，"@ testing-library/react":"^ 11.1.0"，"@ testing-library/user-event":"^ 12.1.10&"，"axios":"^ 0.21.0"，类名":"^ 2.2.6"，时刻":"^ 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"；}，脚本":{开始":"react-app-wired开始"，"build":"react-app-rewired构建"，"test":"react-app-wired test"，弹出":反应脚本弹出"；弹出".}，"eslintConfig":{扩展":["react-app"，"react-app/jest"；]}，浏览器列表":{生产":[> 0.2％"，未死"，不是op_mini全部"；]，发展":[最后1个镀铬版本"，最新的1个Firefox版本"，最后1个野生动物园版本"]}，"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"，更漂亮":"^ 2.1.2"，"react-app-rewired":"^ 2.1.6"；}} 这是我的eslintrc.json :(请注意，我尚未添加所有规则)
{"env":{浏览器":是的，"es2021":是}，扩展":["react-app"，更漂亮"]，"parserOptions":{"ecmaFeatures":{" jsx" ;:是}，"ecmaVersion":12"sourceType":模块"；}，插件":[反应"，更漂亮"]，规则":{更漂亮/更漂亮":[错误"，{"printWidth":140，"singleQuote":是的，"editor.formatOnSave":是的，"arrowParens":始终"，"jsxSingleQuote":是的，"tabWidth":2"trailingComma":无"；}]，"no-unused-vars":错误".}} 当我运行该应用程序时，由于此错误而无法编译:
第113:13行:'isLoading'被分配了一个值，但从未使用过no-unused-vars 我已经在以前的项目中工作过，代码中显示eslint错误，而不会导致应用程序崩溃.有人可以指出我的混乱之处吗?
谢谢
使用 create-react-app 和设置eslint .
陪同错误显示在浏览器中，而不显示在控制台中.
一次，我调试了所有依赖项.看来 react-scripts 对我来说是造成皮棉错误的原因.
react-scripts的最新版本:"4.0.0&" 可能会有一些重大更改，这可能导致eslint在浏览器中抛出错误.
解决方案:
此问题已在 react-scipts:"4.0.3" 中修复，但项目中存在的eslint错误未转换为默认情况下显示警告.您必须创建一个 .env文件，该文件应包含一个 ESLINT_NO_DEV_ERRORS = true 标志.由于存在此标志，您将收到 eslint错误作为警告，而不是开发中的错误.
在生产过程中以及运行任何git挂钩时，将忽略此标志，当您尝试提交代码时，这反过来会导致错误，其中有一个错误错误.
更新2:
活动问题:
完成编辑后，运行 yarn patch-package react-scripts .这将创建一个补丁程序文件夹，其中包含依赖补丁程序.
现在，因为在安装依赖项时我们不想每次都这样做.我们将添加另一个脚本到我们的package.json文件中.
"postinstall":"patch-package" .
在安装依赖项时，以上脚本将每次运行.请记住，您还必须将packages文件夹推送到您的仓库中.如果需要更改，请在部署应用程序时进行.
感谢@fernandaad提供此解决方法.
更新1:
由于当前没有可用的解决方法，因此必须降级为 react-scripts:3.4.4 版本.现在，错误正在控制台而不是浏览器中引发.
- 删除node_modules和package.lock/yarn.lock.
- 将react-scripts从4.0.0降级到3.4.4.
- 安装依赖项并启动应用程序.
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
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.
这篇关于由于ESLint错误，我的create-react-app无法编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
