Failed to load config "airbnb" to extend from - gitlab ci

Question

I tried to do and redo the Airbnb eslint installation in various ways, but I always get this build error inside GitLab-ci. It works in my local environment.

I created the project with the create-react-app, installed the dependencies separately so as not to overwrite the eslint version. But I've tried to install all dependencies together using npx install-peerdeps --dev eslint-config-airbnb and reinstalling the version of eslint created by creating react app.

I've also tried to set dependencies directly in package.json instead of creating a configuration file

My package.json:

{
  "name": "assinatura",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@mui/material": "^5.0.2",
    "@react-pdf-viewer/core": "^2.9.1",
    "@react-pdf-viewer/page-navigation": "^2.9.1",
    "@react-pdf-viewer/zoom": "^2.9.1",
    "axios": "^0.21.4",
    "bootstrap": "^5.0.2",
    "enzyme-to-json": "^3.6.2",
    "pdfjs-dist": "2.6.347",
    "progress-bar": "^0.1.1",
    "prop-types": "^15.7.2",
    "query-string": "^7.0.1",
    "react": "^17.0.2",
    "react-bootstrap": "^2.0.0-rc.0",
    "react-dom": "^17.0.2",
    "react-icons": "^4.2.0",
    "react-meta-tags": "^1.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-signature-canvas": "^1.0.3",
    "styled-components": "^5.3.1",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "test:coverage": "react-scripts test --coverage",
    "eject": "react-scripts eject",
    "postinstall": "node ./postconfig.js",
    "eslint": "eslint .",
    "eslint-fix": "eslint --fix .",
    "build:staging": "sh -ac '. ./.env.staging; react-scripts build'"
  },
  "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": {
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.6",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^4.0.0",
    "prettier": "^2.4.1"
  }
}

My .eslintrc:

{
  "extends": [
    "react-app",
    "airbnb",
    "plugin:jsx-a11y/recommended",
    "prettier"
  ],
  "plugins": [
    "jsx-a11y",
    "prettier"
  ],
  "rules": {
    "semi": 0,
    "prettier/prettier": [
      "error", {
        "semi": false
      }
    ]
  }
}

and I put node_modules on .eslintignore

Has anyone ever experienced this?

Answer 1

I had a similar issue on a react app while deploying through GitHub and was code built.

npm install -g install-peerdeps
install-peerdeps --dev eslint-config-airbnb
install-peerdeps --dev eslint-config-airbnb-base

Will fix it for you too

Answer 2

In your .eslintrc or where your eslint config is, look for the extends object and remove the "airbnb" from the array if it is not needed.

from ==>    "extends": ["airbnb", "prettier", "plugin:react/jsx-runtime", "plugin:jsx-a11y/recommended", "plugin:react-hooks/recommended"],

to ==>    "extends": ["prettier", "plugin:react/jsx-runtime", "plugin:jsx-a11y/recommended", "plugin:react-hooks/recommended"],

OR install the packages

npm install -g install-peerdeps install-peerdeps --dev eslint-config-airbnb install-peerdeps --dev eslint-config-airbnb-base