Reaction应用程序在部署到Heroku时无法加载配置Airbnb [英] React app failed to load config "airbnb" in deploying to heroku
本文介绍了Reaction应用程序在部署到Heroku时无法加载配置Airbnb的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法将我的Create Reaction应用程序部署到Heroku。错误日志在下面。
-----> Build
Running build (yarn)
yarn run v1.22.10
$ react-scripts build
Creating an optimized production build...
Failed to compile.
Failed to load config "airbnb" to extend from.
Referenced from: /tmp/build_49ca30fd/.eslintrc.js
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
Some possible problems:
- Node version not specified in package.json
https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
这是我的eslint.js。
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:react/recommended',
'airbnb',
'airbnb/hooks',
'plugin:import/errors',
'plugin:import/warnings',
'plugin:import/typescript',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
'prettier',
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
project: './tsconfig.eslint.json',
sourceType: 'module',
tsconfigRootDir: __dirname,
},
plugins: [
'react',
'@typescript-eslint',
'import',
'jsx-a11y',
'react-hooks',
'prettier',
],
root: true,
rules: {
'import/no-cycle': 'off',
'no-use-before-define': 'off',
'no-alert': 'off',
'@typescript-eslint/no-use-before-define': ['error'],
'lines-between-class-members': [
'error',
'always',
{
exceptAfterSingleLine: true,
},
],
'no-void': [
'error',
{
allowAsStatement: true,
},
],
'padding-line-between-statements': [
'error',
{
blankLine: 'always',
prev: '*',
next: 'return',
},
],
'@typescript-eslint/no-unused-vars': [
'warn',
{
vars: 'all',
args: 'after-used',
argsIgnorePattern: '_',
ignoreRestSiblings: false,
varsIgnorePattern: '_',
},
],
'@typescript-eslint/no-unsafe-member-access': ['warn'],
'import/extensions': [
'error',
'ignorePackages',
{
js: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never',
},
],
'react/jsx-filename-extension': [
'error',
{
extensions: ['.jsx', '.tsx'],
},
],
'react/jsx-props-no-spreading': ['off'],
'lines-between-class-members': [
'error',
'always',
{
exceptAfterSingleLine: true,
},
],
},
overrides: [
{
files: ['*.tsx'],
rules: {
'react/prop-types': 'off',
},
},
],
settings: {
'import/resolver': {
node: {
paths: ['src'],
},
},
},
}
我在我的应用程序中使用了Airbnb的风格指南和eslint和更漂亮的。我将它们安装到了DevDependors。我的paakage.json在下面。
{
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"@hookform/resolvers": "^2.4.0",
"@loadable/component": "^5.14.1",
"@material-ui/core": "^4.11.4",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.58",
"@types/date-fns": "^2.6.0",
"@types/node": "^15.0.1",
"@types/react": "^17.0.4",
"@types/react-dom": "^17.0.3",
"@types/styled-components": "^5.1.9",
"axios": "^0.21.1",
"camelcase-keys": "^6.2.2",
"date-fns": "^2.21.1",
"express": "^4.17.1",
"express-favicon": "^2.0.1",
"file-saver": "^2.0.5",
"firebase": "^8.4.3",
"heroku-ssl-redirect": "^0.1.1",
"little-state-machine": "^3.1.4",
"path": "^0.12.7",
"qs": "^6.10.1",
"react": "^16.13.1",
"react-circular-progressbar": "^2.0.4",
"react-devtools": "^4.13.0",
"react-dom": "^16.13.1",
"react-hook-form": "^7.3.5",
"react-media": "^1.10.0",
"react-responsive": "^8.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-sortablejs": "^6.0.0",
"sanitize-html": "^2.3.3",
"snakecase-keys": "^4.0.1",
"sortablejs": "^1.13.0",
"source-map-explorer": "^2.5.2",
"styled-components": "^5.2.3",
"styled-media-query": "^2.1.2",
"typescript": "~4.2.4",
"typesync": "^0.8.0",
"uuid": "^8.3.2",
"yup": "^0.32.9"
},
"devDependencies": {
"@types/eslint": "^7.2.10",
"@types/eslint-plugin-prettier": "^3.1.0",
"@types/express": "^4.17.11",
"@types/file-saver": "^2.0.2",
"@types/loadable__component": "^5.13.3",
"@types/prettier": "2.2.3",
"@types/qs": "^6.9.6",
"@types/react-devtools": "^3.6.0",
"@types/react-responsive": "^8.0.2",
"@types/react-router-dom": "^5.1.7",
"@types/sanitize-html": "^2.3.1",
"@types/snakecase-keys": "^2.1.0",
"@types/sortablejs": "^1.10.6",
"@types/uuid": "^8.3.0",
"@types/yup": "^0.29.11",
"@typescript-eslint/eslint-plugin": "^4.22.0",
"@typescript-eslint/parser": "^4.22.0",
"dotenv": "^8.2.0",
"eslint": "^7.2.0",
"eslint-config-airbnb": "18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^1.7.0",
"prettier": "2.2.1",
}
}
当Heroku部署应用程序时，Heroku删除了DevDependency。我认为这就是原因所在。我尝试将YANINE_PROGUCTION环境设置为FALSE。然后，我成功了。 但是，因为安装了DevDependency，所以包的大小更大。我想避免它。
如何在使用eslint和更漂亮的软件将应用部署到Heroku时处理DevDependency？
推荐答案
Heroku支持自定义构建脚本，可以直接设置环境变量：
"scripts": {
...
"build": "react-scripts build",
"heroku-postbuild": "DISABLE_ESLINT_PLUGIN=true react-scripts build"
},
piouson的答案可以解决问题，但我发现使用以下解决方案更好，因为它是(至少我相信)Heroku特定的问题和.env.production文件可能会影响其他潜在的生产服务器。
这篇关于Reaction应用程序在部署到Heroku时无法加载配置Airbnb的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
