Failed to load config "prettier" to extend from from .eslintrc.json

[kundarsowjanya]

Hi, I'm using prettier in my eslint file, but it's working fine in local but in CI/CD I'm getting this error Failed to load config "prettier" to extend from from .eslintrc.json, when I run npm run build,

And here is the package.json:

  "scripts": {
    "start": "react-scripts -r dotenv/config start dotenv_config_path=.env",
    "start:cypress": "react-scripts -r dotenv/config -r @cypress/instrument-cra start dotenv_config_path=.env.test",
    "build": "react-scripts build",
    "test": "jest --config=./jest.config.js",
    "test:update": "jest --updateSnapshot",
    "eject": "react-scripts eject",
    "cypress:open": "cypress open",
    "cypress:build": "react-scripts -r dotenv/config -r @cypress/instrument-cra build dotenv_config_path=.env.test",
    "cypress:build:serve": "npx serve -s build -l 3000",
    "cypress:build:run": "cypress run --config baseUrl=http://localhost:3000",
    "start:cypress:local": "react-scripts -r dotenv/config -r @cypress/instrument-cra start dotenv_config_path=.env.test.local",
    "cypress:run": "cypress run",
    "cypress:run:chrome": "cypress run --headless --browser chrome",
    "cypress:run:chrome:local": "cypress run --config-file cypress-local.json --browser chrome",
    "reports:mkdir": "npx mkdirp .nyc_output target/reports",
    "reports:copy": "npm run reports:mkdir && cp cypress-coverage/coverage-final.json target/reports/from-cypress.json && cp target/coverage/jest/coverage-final.json target/reports/from-jest.json",
    "reports:combine": "nyc merge target/reports && mv coverage.json .nyc_output/out.json",
    "reports:combined": "nyc report --reporter lcov --report-dir target/coverage/merged",
    "reports": "npm run reports:copy && npm run reports:combine && npm run reports:combined",
    "lint": "eslint src/**/*.{ts,tsx} --fix",
    "format": "prettier --write \"{src,cypress}/**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
  },

 "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@cypress/code-coverage": "1.14.0",
    "@cypress/instrument-cra": "1.4.0",
    "@testing-library/jest-dom": "4.2.4",
    "@testing-library/react": "9.4.0",
    "@testing-library/user-event": "7.2.1",
    "@types/enzyme": "3.10.4",
    "@types/enzyme-adapter-react-16": "1.0.5",
    "@types/jest": "25.1.1",
    "@types/lodash": "4.14.156",
    "@types/node": "12.7.5",
    "@types/react": "16.9.51",
    "@types/react-dom": "16.9.8",
    "@types/react-redux": "7.1.9",
    "@types/react-router-dom": "5.1.6",
    "@types/redux-mock-store": "1.0.2",
    "babel-plugin-istanbul": "6.1.1",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-preset-react-app": "9.1.2",
    "cypress": "6.8.0",
    "cypress-shadow-dom": "1.4.1",
    "document-register-element": "1.14.3",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.2",
    "eslint": "^7.11.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-cypress": "2.10.3",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "8.0.1",
    "jest-environment-jsdom-sixteen": "1.0.0",
    "jest-junit": "10.0.0",
    "jest-junit-reporter": "1.1.0",
    "jest-sonar-reporter": "2.0.0",
    "lint-staged": "10.5.3",
    "nyc": "14.1.1",
    "prettier": "2.0.5",
    "redux-mock-store": "1.5.4"
  },

eslintrc.json

{
  "root": true,
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "react-app",
    "airbnb",
    "prettier",
    "prettier/react",
    "prettier/@typescript-eslint",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "eslint:recommended",
    "plugin:cypress/recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["cypress", "react", "@typescript-eslint", "prettier"],
  "rules": {
    "react/jsx-filename-extension": ["warn", { "extensions": [".jsx", ".tsx"] }],
    "react/jsx-one-expression-per-line": ["off"],
    "react/prop-types": ["off"],
    "import/prefer-default-export": ["off"],
    "curly": ["error", "all"],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ],
    "cypress/no-assigning-return-values": "error",
    "cypress/no-unnecessary-waiting": "error",
    "cypress/assertion-before-screenshot": "warn",
    "cypress/no-force": "warn"
  },
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"],
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
}

[JounQin]

1. see docs: update outdated doc in favor of eslint-plugin-prettier v4.1.0 #1071
2. You should use https://github.com/import-js/eslint-import-resolver-typescript for TypeScript

[JamesHenry]

Hi @kundarsowjanya I'm going to close this one as the updated docs have been merged and there hasn't been any further activity, so hopefully you were able to resolve your configuration issue with JounQin's help

[CreativeWarlock]

So does this mean "prettier" is replaced by eslint-plugin-prettier and thus obsolete?