heroku Failed to load config "airbnb" to extend from. Referenced from: /app/.eslintrc.json

Question

I'm trying to deploy an app to Heroku, it's working perfectly in my local. But in Heroku show me: =>

Failed to compile

 Failed to load config "airbnb" to extend from.
 Referenced from: /app/.eslintrc.json

This error occurred during the build time and cannot be dismissed.

I try to fix it by installing airbn in the Heroku console. But didn't work. I appreciate if you could help me.

Here is my package.json file =>

{
  "name": "calculator",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "big.js": "^6.1.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts 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": {
    "@babel/core": "^7.14.0",
    "@babel/eslint-parser": "^7.13.14",
    "@babel/plugin-syntax-jsx": "^7.12.13",
    "@babel/preset-react": "^7.13.13",
    "eslint": "^7.25.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "stylelint": "^13.13.1",
    "stylelint-config-standard": "^21.0.0",
    "stylelint-csstree-validator": "^1.9.0",
    "stylelint-scss": "^3.19.0"
  }
}

and here my eslint configuration =>

{
  "env": {
    "browser": true,
    "es6": true,
    "jest": true
  },
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "extends": ["airbnb", "plugin:react/recommended"],
  "plugins": ["react"],
  "rules": {
    "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }],
    "react/react-in-jsx-scope": "off",
    "import/no-unresolved": "off",
    "no-shadow": "off"
  },
  "ignorePatterns": [
    "dist/",
    "build/"
  ]
}

Answer 1

I had to follow these steps and that fixed it.

1| heroku create $APP_NAME --buildpack mars/create-react-app
2| git push heroku HEAD:master


Replace $APP_NAME with the name of your unique app.

here is the documentation link:

github.com/mars/create-react-app-buildpack

Answer 2

I was experiencing the same issues and finally what worked was to move "eslint-config-airbnb" from "devDependencies" to "dependencies" as indicated by eamanola.

Also, my context was a bit different, as I was running a create-react-app and express app.