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

Viewed 14227

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?

4 Answers

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

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

"eslintConfig": { "extends": [ "react-app", "react-app/test" ] },

These Command-Line worked for me

rm -rf node_modules
sudo npm install eslint --save
sudo npm install eslint-config-airbnb-base --save
sudo npm install eslint-plugin-markdown --save
sudo npm install eslint-plugin-import --save
npm i
npx eslint --version
Related