[英]My create-react-app is failing to compile due to ESLint error
我刚刚创建了一个包含react v17 的带有create-react-app
的新模板,并且像以前一样安装了 eslint 依赖项,这是我的 package.json 文件
{
"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"
}
}
这是我的 eslintrc.json :(请注意,我还没有添加所有规则)
{
"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"
}
}
当我运行应用程序时,由于此错误而无法编译:
Line 113:13: 'isLoading' is assigned a value but never used no-unused-vars
我从事过以前的项目,并且代码中显示了 eslint 错误,而不会导致应用程序崩溃。 谁能指出我搞砸的地方?
当我使用create-react-app
应用程序并为应用程序设置 eslint时,我遇到了完全相同的错误。
eslint 错误显示在浏览器而不是控制台中。
有一次,我调试了所有依赖项。 似乎react-scripts
对我造成了 lint 错误。
最新版本的react-scripts:"4.0.0"
可能有一些重大更改,可能导致 eslint 在浏览器中抛出错误。
此问题已在react-scipts:"4.0.3"
中修复,但项目中存在的 eslint 错误默认不会转换为警告。 您必须创建一个.env 文件,该文件应包含ESLINT_NO_DEV_ERRORS=true
标志。 由于这个标志,您将收到eslint 错误作为警告而不是开发中的错误。
这个标志在生产过程中被忽略,当它们运行任何 git 钩子时,当你尝试提交带有eslint 错误的代码时,这反过来会导致错误。
活动问题: https ://github.com/facebook/create-react-app/issues/9887
在 react-scripts:4.0.2 发布之前,此问题的解决方法:
安装patch-package和postinstall-postinstall作为 dev 依赖项。
转到node_modules/react-scripts/config/webpack.config.js并进行以下更改
完成编辑后,运行yarn patch-package react-scripts 。 这将创建一个补丁文件夹,其中包含依赖补丁。
现在,因为我们不想在安装依赖项时每次都这样做。 我们将在 package.json 文件中添加另一个脚本。
"postinstall":"patch-package"
。
每次我们安装依赖项时,上面的脚本都会运行。 请记住,您还必须将包文件夹推送到您的存储库。 如果您需要更改,也可以在部署应用程序时进行。
感谢 @fernandaad 提供此解决方法。
不得不降级到react-scripts:3.4.4
版本,因为目前没有可用的解决方法。 现在,错误被抛出在控制台而不是浏览器中。
我能够使用 env 变量修复它,因为我没有使用 webpack。
确保您使用的是 VSCode 扩展,并且安装了 eslint 作为开发依赖项(以及您可能需要的任何其他插件)。
要让您的代码在开发中进行 lint,但不会失败,请将其添加到您的.env.development 中: ESLINT_NO_DEV_ERRORS=true
要在生产版本中完全禁用 eslint,请将其添加到您的.env.production 中: DISABLE_ESLINT_PLUGIN=true
之后,它不应失败任何构建。 我不明白为什么 eslint 会失败构建。 它可以帮助我们保持代码质量,但不一定要强制执行。
我花了几个小时才找到可能的解决方案:
1- 解决方法:在package.json文件中添加规则
"eslintConfig": {
"extends": ["react-app"],
"rules": {
"no-unused-vars": "warn"
},
"overrides": [
{
"files": ["**/*.ts?(x)"],
"rules": {
"max-len": "warn"
}
}
]
},
2-您可以使用.eslintrc.js文件,方法是在根文件夹中添加具有以下内容的.env文件:
DISABLE_ESLINT_PLUGIN=true
ESLINT_NO_DEV_ERRORS=true
DISABLE_ESLINT_PLUGIN- 将在开发和生产中禁用eslint-webpack-plugin 。 - 这是必须的。
ESLINT_NO_DEV_ERRORS - 在开发过程中将 ESLint 错误转换为警告。 因此,ESLint 输出将不再出现在错误覆盖中。 仅此一项并不能修复错误。
围绕 react-scripts 的天才开发人员决定在CI=true
出现后将警告变为错误。 因此,解决此问题的唯一方法是对您的命令使用CI=false
或让您的 eslint 运行无警告。 没有必要在这里建议 eslint 规则会导致由您的代码库或自定义规则集引起的另一个警告可能会触发该问题。
调整package.json
中的scripts
块:
"scripts": {
"start": "CI=false react-app-rewired start",
"build": "CI=false react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
}
或者这样运行:
CI=false npm run start
CI=false npm run build
在 GitHub 上查看相关问题:
打开next.config.js
并在 eslint 配置中启用ignoreDuringBuilds
选项:
module.exports = {
eslint: {
ignoreDuringBuilds: true
}
}
对于临时解决方法,请使用.eslintrc.js
以便您可以检查当前节点环境并相应地设置规则。 例如:
const isProd = process.env.NODE_ENV === 'production';
const warnDevErrorProd = isProd ? 2 : 1;
{
...
"rules": {
...
"prettier/prettier": warnDevErrorProd,
"no-console": warnDevErrorProd,
...
}
...
}
这样你就不需要弹出来修改你的 webpack 配置来改变那里的规则。
This Compiled with questions 也可以通过在 .env 文件中添加这个来解决。 我面临这个问题并尝试使用这行代码来解决它。
SKIP_PREFLIGHT_CHECK=true
或者
ESLINT_NO_DEV_ERRORS=true
SKIP_PREFLIGHT_CHECK=true or ESLINT_NO_DEV_ERRORS=true
或者您也可以编辑 package.json。
"start": "ESLINT_NO_DEV_ERRORS='true' react-scripts start",
"build": "DISABLE_ESLINT_PLUGIN='true' react-scripts build",
您可以禁用no-unused-vars
eslint 规则或将规则级别更改为warning
而不是error
。
更多信息在这里: https : //eslint.org/docs/rules/no-unused-vars
当我将我的 create-react-app 升级到 v4 时,看到 eslint 问题页面令人生畏 -> 错误阻止我的应用程序编译。 不是我期望使用 react 的fast-refresh
的直接体验 :)。 Eslint 7 中规则(和错误级别)的变化肯定是原因。 虽然,转译过程如何开始关心以前仅限于我的 linter 的prettier/prettier
的问题,但我仍然不清楚。
有几件事正在发生。 Eslint 更改(以及任何扩展,如 airbnb)可能会改变我的错误和警告组合,但可能最相关:CRA v4 不再使用自己的 eslint 规则,而是使用项目的规则,即使用的 linting 规则在我的编辑器中。 在升级之前,CRA 对项目规则的使用是使用EXTEND_ESLINT
启用的。 这个寄存器现在默认打开,不再是我可以在 v4 中使用env
设置的东西(无论如何根据我的经验)。
无论如何,让应用程序转换的快速修复如下:
git commit
我的最新更改yarn prettier --config ./.prettierrc --write '**/*.{js|jsx}'
.eslintrc
中创建了一个新条目,将阻塞错误设置为'warn'
; 例如,添加了'no-param-reassign': 'warn'
(我经常在我的.reduce
例程中做的事情)。总而言之,这个过程花了我大约 5 分钟。
这让我到了一个可以编译应用程序的地方,同时让我有时间处理/优先考虑在这个fast-refresh
、非弹出的 CRA、Eslint v7 版本的应用程序中有意义的事情。
-E
您可以在项目的 node_modules\react-scripts\config\webpack.config.js 中为 ESLintPlugin 方法添加两个属性。
failOnError:假,emitWarning:真,
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,
我有同样的问题
这个问题在github上的 CRA(4.0 版)中有一个未解决的问题
我找到了一个临时解决方案
node_modules
React-Scripts
版本从4.0.0
更改为3.4.4
SKIP_PREFLIGHT_CHECK=true
添加到.env
文件中npm install
PS:如果您的项目中不存在.env
文件,您可以在根文件夹中创建该文件
现在, emit + Warning/Error
和failOn + Warning/Error
对我不起作用。 目前我没有设置它(保持默认),而是设置quiet = true
。 在这个配置中,ESLint 向我展示了错误,但不要在上面
我有同样的错误,这对我有用。
除了错误之外,当我想创建应用程序时,我在终端中收到了以下建议。
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.
以上3个我都做了。 然后我做了以下 -
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
当我执行 npm start 时,它的工作原理似乎是 yarn 正在努力修补/解决问题。
我不得不在这里做一些试验和错误,但最终它奏效了。 我不是专家,所以并不真正了解引擎盖下到底发生了什么,但这对我有用,因为纱线解决了 eslint 问题。
替换.eslintrc.json
文件中的倒数第三行
"no-unused-vars": "error"
和
"no-unused-vars": "warn"
我希望该更改会导致警告而不是错误。
不要忘记重新启动您的文本编辑器或 IDE!
免责声明
从我在您的问题中可以读到的内容,我相信我的提示应该会有所帮助。 但我自己没有试过。
由于现在不推荐使用eslint-loader
并且现在在 create-react-app 中使用了eslint-webpack-plugin
检查文档,因此我能够通过向eslint-webpack-plugin
添加两个选项来解决问题
弹出你的 react 应用程序后,将这些选项添加到ESLintPlugin
选项中:
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'
})
}
}
})
在 module.rules 中修改以下规则以具有
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,
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.