React应用程序在部署到heroku时未能加载配置"airbnb“

Question

我未能将应用程序部署到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的风格指南，在我的应用程序中更漂亮。我将它们安装到devDependencies中。我的pacakage.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就会删除devDependencies。我想这就是原因。我试图将YARN_PRODUCTION env设置为false。然后，我成功了。但是，由于安装了devDependencies，所以包的大小更大。我想避开它。

在向heroku部署应用程序时，我如何处理devDependencies？

Answer 1

只是在这个问题上绊倒了，一天都在网络上翻来覆去，无法解决这个问题。必须在生产生成中禁用eslint-webpack-plugin：

• 创建文件.env.production
• 打开文件并添加DISABLE_ESLINT_PLUGIN=true

在CI期间，您仍然可以运行yarn lint或其他没有问题的linting脚本，避免只发生在yarn build上的webpack问题。

资料来源：

• GitHub问题
• CRA高级配置
• CRA .env文件

Answer 2

Heroku支持自定义构建脚本，您可以在其中直接设置环境变量：

"scripts": {
    ...
    "build": "react-scripts build",
    "heroku-postbuild": "DISABLE_ESLINT_PLUGIN=true react-scripts build"
  },

piouson的回答是可行的，但是我发现使用以下解决方案更干净，因为它是(至少我相信)Heroku特有的问题，.env.production文件可能会影响其他潜在的生产服务器。