问题描述
我未能将我的 create react 应用程序部署到 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',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'],overrides: [
{
files: ['*.tsx'],rules: {
'react/prop-types': 'off',settings: {
'import/resolver': {
node: {
paths: ['src'],}
我在我的应用中使用带有 eslint 和 prettier 的 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，所以包的大小更大。我想避免它。
在使用 eslint 和 prettier to heroku 部署应用程序时，我如何处理 devDependencies？
解决方法
刚刚偶然发现了这个问题，在网上敲了一整天后仍无法解决。必须在生产版本中禁用 eslint-webpack-plugin：
- 创建文件
.env.production - 打开文件并添加
DISABLE_ESLINT_PLUGIN=true
在 CI 期间，您仍然可以毫无问题地运行 yarn lint 或任何您的 linting 脚本，并避免此仅在 yarn build 上发生的 webpack 问题
来源：