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?

Swagman

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

Doro

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

Sapid

Answer 3

You can simply run this in cmd:

npm i eslint-config-airbnb-base

Eleanoreleanora

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, can you edit your answer to include an explanation of what you're doing and why you believe it is the best approach? – Miltonmilty

npm i -D eslint-config-airbnb-base actually – Inca

Answer 4

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

Wroth

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Wheeling

Answer 5

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

Diplopod

If you are using sudo to install, then your npm installation was done incorrectly. This is bad practice and not recommended. givan.se/do-not-sudo-npm – Legator