Error failed to load config airbnb to extend from

I have tried most of the solutions suggested here but nothing works.
Maybe because my architecture is a bit different.
I have a client-server architecture that looks like this:

Here is the architecture in details:

Client part contains .eslintrc.json but the server part (root folder) does not.

When I run locally, it works fine but when I try to deploy on heroku, I get this error :

[eslint] Failed to load config "airbnb" to extend from.
remote: Referenced from: /tmp/build_b7392388/client/.eslintrc.json

Here is package.json from server (root folder):

{
  "proxy": "http://localhost:3001",
  "name": "emoteco_nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "homepage": ".",
  "scripts": {
    "start": "node server/index.js",
    "build": "cd client && npm install && npm run build",
    "test": "echo "Error: no test specified" && exit 1"
  },
  "engines": {
    "node": "14.17.5"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "applicationinsights": "^2.3.0",
    "axios": "^0.27.2",
    "azure-storage": "^2.10.7",
    "express": "^4.17.2",
    "gm": "^1.23.1",
    "image-data-uri": "^2.0.1",
    "jsonwebtoken": "^8.5.1",
    "mongodb": "^4.2.2",
    "multer": "^1.4.5-lts.1",
    "node-cron": "^3.0.0",
    "node-html-to-image": "^3.2.4",
    "nodemailer": "^6.7.7",
    "react-validation": "^3.0.7",
    "validator": "^13.7.0"
  },
  "devDependencies": {
    "sass": "^1.52.1"
  }
}

Here is package.json from client (sub folder):

{
  "name": "emotecoapp",
  "version": "2.0.1",
  "private": true,
  "author": "Creative Tim",
  "license": "See license in https://www.creative-tim.com/license",
  "description": "Otis Kit PRO by Creative Tim",
  "homepage": "",
  "bugs": {
    "url": "https://github.com/creativetimofficial/ct-otis-kit-pro/issues"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/creativetimofficial/ct-otis-kit-pro.git"
  },
  "engines": {
    "node": "14 || 15 || 16",
    "npm": ">=6"
  },
  "dependencies": {
    "@emotion/cache": "11.7.1",
    "@emotion/react": "11.9.0",
    "@emotion/styled": "11.8.1",
    "@mui/icons-material": "5.6.2",
    "@mui/material": "5.6.4",
    "@mui/styled-engine": "5.6.1",
    "@testing-library/jest-dom": "5.16.4",
    "@testing-library/react": "13.2.0",
    "@testing-library/user-event": "14.1.1",
    "@types/jest": "^29.2.0",
    "@types/node": "^18.11.7",
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "axios": "^1.1.3",
    "chroma-js": "2.4.2",
    "flatpickr": "4.6.13",
    "onnxjs": "^0.1.8",
    "prop-types": "15.8.1",
    "react": "18.1.0",
    "react-copy-to-clipboard": "5.1.0",
    "react-countup": "6.2.0",
    "react-dom": "18.1.0",
    "react-flatpickr": "3.10.11",
    "react-native-pytorch-core": "^0.2.2",
    "react-router-dom": "6.3.0",
    "react-scripts": "5.0.1",
    "react-syntax-highlighter": "15.5.0",
    "react-webcam": "^7.0.1",
    "rellax": "1.12.1",
    "swiper": "7.3.4",
    "typed.js": "2.0.12",
    "typescript": "^4.8.4",
    "uuid": "8.3.2",
    "web-vitals": "2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm start"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint": "^8.2.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "8.5.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-react": "7.29.4",
    "eslint-plugin-react-hooks": "4.5.0",
    "prettier": "2.6.2"
  }
}

Does anyone have a suggestion for my case?

ESLint: Failed to load config «airbnb» to extend from. #2233

expect: Eslint add single quote and add white spaces

error: ESLint: Failed to load config «airbnb» to extend from. Referenced from:

Already did:

• Deleted node_modules
• run yarn eslint —init
• reloaded vs code

Directory:

ESLint output channel

ESLint is working, if I delete last line in file, it add again. When I’d setup in the early of project, was working fine. Stop working after a git pull, eslint config file was in .gitignore.

It already happened to me one time and I was not able to resolve. I’m new with it and sorry if it is a simple question.

The text was updated successfully, but these errors were encountered:

@droderuan How are you running eslint? Make sure you have nothing globally installed (which is deprecated), and then use npx eslint or an npm run-script .

@ljharb I’m adding eslint first, like development dependency, after I run yarn eslint —init , I choose the options and when ask to downgrade, I put yes and install everything. Until then, works fine but in the repository I was working, master doesn’t have .eslintrc because of .gitignore. After a merge and push, eslintrc was deleted. I removed .eslintrc from .gitignore, installed again in my branch, and master had eslint again. Everything works fine until I did a git push.
Again, I thought it was because of my mistake in master repo. I deleted node_modules, .eslintrc, removed from package.json, make from the start and still not working. I don’t know why it is happening even I make installation from start.

(I’m going to close this, since it’s not directly related to this config)

Since you’re using yarn instead of npm, i’m not sure what debugging steps to suggest; you’ll need to make sure you’re using eslint 6, not 7, and that all required peer deps are installed and the versions match. npm ls usually tells you this.

Источник

Failed to compile — Failed to load config «react-app» to extend from #10463

Describe the bug

Create new react app with typescript template.
Following yarn start, no web page is loaded, error shows, Failed to load config «react-app» to extend from.

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

«extend», «failed», «config»

Environment

npx create-react-app —info

Steps to reproduce

1. yarn set version berry
2. create-react-app onboard —template typescript
3. cd onboard/
4. yarn start

Expected behavior

React app start web page to display

Actual behavior

No ‘start’ web page successfully shown (browser displays error).

browser opened — showing same error output as terminal.

The text was updated successfully, but these errors were encountered:

I have this same issue without the typescript template

1. yarn set version latest
2. npx create-react-app application
3. cd application
4. yarn start

npx create-react-app —info

Running from PowerShell with ExecutionPolicy RemoteSigned -Scope CurrentUser

• npm install no effect
• yarn install no effect
• Uninstalled yarn 2.4.0 from the directory and ran npx create-react-app application again: The application works with yarn 1.22.10 — attempt to update to yarn 2.4.0 afterwards result in the same error after yarn start

For me the same error happened when I was migrating my project to use Yarn 2. I was using the following guide:
https://yarnpkg.com/getting-started/migration

The command yarn start worked fine when not using the Plug’n’Play feature. The error started happening when I tried to enable the feature (by removing nodeLinker: «node-modules» from .yarnrc.yml ). I’m inclined to believe that the issue is related to dependency issues, as the Plug’n’Play mode seems to be more strict with respect to how the module resolution works.

After checking eslint/eslint#13283 and installing eslint-config-react-app (with yarn add eslint-config-react-app ), the start script worked fine for me.

Note: I’m not using typescript, but I believe that is unrelated to the real issue.

@guludo Your response is spot on. I created a React app using yarn create react-app my-app —template typescript , followed the directions to migrate from yarn 1.22.x to 2.x and received the same error as everyone else. Then I used yarn add eslint-config-react-app from your comment, and immediately the stock skeleton application ran as expected. Good find. Thanks a lot. It took me most of a day to find this information and figure it out (not being a front-end developer myself 😉 ).

Источник

Почему ошибка при установке prettier?

Добрый день! Объясните пожалуйста почему при установке prettier, eslint-plugin-prettier webstorm материться что

В чем может быть проблема, все зависимости установлены как глобально так и локально?
Уже все перепробовал.
Буду благодарен.

• Вопрос задан более трёх лет назад
• 4213 просмотров

ставьте плагин eslint-plugin-react. Дополнительно если не установлены:
eslint
babel-eslint
eslint-plugin-jsx-a11y
eslint-plugin-import
eslint-config-prettier
eslint-config-airbnb
eslint-plugin-prettier
Добавляйте так:

Правила настройте под себя.

Если хотите precommit проверку, то поставьте lint-stаged и husky, и добавьте следующие строки в package.json:

Теперь перед каждым вашим коммитом код будет приводиться в порядок на автомате если это возможно. И прерывать коммит ошибкой если нарушены правила.

До сих пор проблема не решана
такое впечатление, что webstorm хочет загрузить этот плагин из папки eslint

cester, у вас не установлен eslint-plugin-prettier, да и сам prettier не вижу.

yarn add -D prettier eslint-plugin-prettier

cester, precommit работает когда вы делаете:
git commit
Вы правила настроили по-минимуму?
Смотрите как это работает:

Нажимаете на лампочку и выбираете ESLint: Fix current file:

Весь файл будет исправлен, если это возможно сделать без вашего вмешательства. То есть не изменяя логики.
Если исправить в автоматическом режиме нельзя, смотрите ошибку, гуглите и исправляете.
Так же можно использовать комментарии для отмены правил для определенных блоков и строк.

Так же можете настроить проверку на сохранение.

cester, https://prettier.io/docs/en/why-prettier.html тут все по пунктам.
Главное сейчас приведите кодовую базу в порядок и вопросов с форматированием возникать больше не будет. Сам инструмент мощней ESLint в плане форматирования.
Взять хотя бы этот кейс:

Prettier исправит так:

А ESLint выдаст ворнинг max-len

Источник

Error: Failed to load config «standard» to extend from. #27

What version of this package are you using?

5.0.0 (standard 14.3.1)

What operating system, Node.js, and npm version?

Manjaro KDE, Node v13.5.0, npm v6.13.4

What happened?

1. Installed standardx with sudo npm install standardx —global
2. Executed standardx —fix in my local project folder.
3. The program terminated with this error:

What did you expect to happen?

To run the autofixer.

Are you willing to submit a pull request to fix this bug?

I’m not familiar with the code, so I don’t think I could.

The text was updated successfully, but these errors were encountered:

ping? I’m also seeing this, with a similar setup.

The standard tool itself works without such an error.

Apparently the error comes from the fact that ESLint v6 now demands that all plugins are installed locally as seen here and here. Replacing the eslint package in standardx/node_modules with eslint@5.16.0 and reverting to ecmaVersion: 2019 in standardx/node_modules/eslint-config-standard/eslintrc.json and standardx/node_modules/eslint-config-standard-jsx/eslintrc.json fixed it for me. Not the ideal solution but at least I can use my customizations now.

@ManuelFte @indigoviolet In the meantime of that wrong configuration of eslint, I could resolve fallback of version 3.0.0 of standardx.

Extra tip:

I was having some problems with paths, etc.. so I ended to add a script to my package.json file.

and finally, just be sure that you are importing the rest of configurations that are described here

That’s it, then It’s working as I expected. 🙂

This is still an issue, we should look into fixing this with the eslint @ 7 upgrade. I think eslint @ 7 is supposed to fix this,

cc @LinusU who’s got the eslint7 PR.

Still an issue for me:

I think resolve plugins relative to is supposed to help with this maybe 🙁

@Jero786 standardx 3.0.0 uses ES 2018, so you still have to change the version numbers as I had mentioned in order to use at least ES 2019. Hopefully this issue is fixed soon because ES 2020 has just been released.

I tried with another a new project and am hitting the same problem. So is it the case that no one is using latest standardx to add typescript support to standard?

I used standardx 3.0.0 because reasons 🙁

I got this issue today and solved it by installing the following packages:

npm install eslint —save-dev
npm install eslint-config-standard —save-dev
npm install eslint-config-standard-jsx —save-dev
npm install eslint-plugin-react —save-dev
npm install eslint-plugin-import —save-dev
npm install eslint-plugin-node —save-dev
npm install eslint-plugin-promise —save-dev
npm install eslint-plugin-standard —save-dev

I got this issue today and solved it by installing the following packages:
.

This worked for me, but I didn’t need all these packages (it’s dependent on your setup). Running
./node_modules/.bin/eslint
will cause it to tell you what libraries you are missing (although you will have to do this multiple times.

I got this issue today and solved it by installing the following packages:

npm install eslint —save-dev
npm install eslint-config-standard —save-dev
npm install eslint-config-standard-jsx —save-dev
npm install eslint-plugin-react —save-dev
npm install eslint-plugin-import —save-dev
npm install eslint-plugin-node —save-dev
npm install eslint-plugin-promise —save-dev
npm install eslint-plugin-standard —save-dev

In my case, it was resolved by removing all these packages and restart VSCode.
The problem was from ‘eslint’ package itself. Probably collided with ‘standardx’ because both are linters.

Источник

When attempting to run eslint-config-airbnb in a gulp task, have been hitting this issue:

Error: Failed to load config "airbnb" to extend from.

Per the docs, did add an .eslintrc file to the project root (same as gulpfile.js), with this code:

"extends": "airbnb"

I’m hitting this error if using it in a .json file:

Error: Unexpected token : in JSON at position 9
    at JSON.parse (<anonymous>)

Or this if .eslintrc.js is used:

  "extends": "airbnb"
           ^

SyntaxError: Unexpected token ':'

I also tried a plain .eslintrc and .eslintrc.yml, and did try different code formats (JS, JSON, YML) for the respective files, but got either the formatting/syntax errors above, or the original error.

System information:
Platform/OS: macOS 12.1 / ARM64
Node: 16.3.2
NPM: 8.1.2
eslint-config-airbnb: 19.0.4

Running npm info "[email protected]" peerDependencies will output:

{
  eslint: '^7.32.0 || ^8.2.0',
  'eslint-plugin-import': '^2.25.3',
  'eslint-plugin-jsx-a11y': '^6.5.1',
  'eslint-plugin-react': '^7.28.0',
  'eslint-plugin-react-hooks': '^4.3.0'
}

And all of these dependencies are installed. Anything else to try?

Failed to load config "airbnb-base" to extend from.
Referenced from: /app/.eslintrc.js

function extractRules(rules) {
  const outputRules = {};

  Object.keys(rules).forEach((ruleName) => {
    const rule = rules[ruleName];

    if (!(rule.justification && rule.justification.length > 0)) {
      throw Error(
        `All linting rules must include a justification.
            Please specify one for ${ruleName}.`,
      );
    }

    outputRules[ruleName] = rule.value;
  });

  return outputRules;
}

module.exports = {
  root: true,
  extends: [
    'react-app',
    'react-app/jest',
    'airbnb-base',
    'airbnb/hooks',
  ],
  env: {
    browser: true,
    jest: true,
  },
  plugins: [
    'jest-dom',
    'react',
    'testing-library',
  ],
  rules: extractRules({
    'import/extensions': {
      value: ['error', 'ignorePackages', {
        js: 'never', jsx: 'never', ts: 'never', tsx: 'never',
      }],
      justification: `AirBnB misconfiguration complains about missing file
          extension even though there is nothing wrong. This fixes it.
          See https://stackoverflow.com/a/59268871 for more information.`,
    },
    'react/jsx-filename-extension': {
      value: ['error', { extensions: ['.jsx', '.tsx'] }],
      justification: `Allow '.tsx' files to contain JSX.`,
    },

    // other global rules
    'arrow-parens': {
      value: ['error', 'always'],
      justification: `Require parenthesis around arrow function arguments for
          increased readability.`,
    },
    'camelcase': {
      value: 'off',
      justification: `Our API responds in snake case, so sometimes we can't
          adhere to camelcase only.`,
    },
    'import/no-unresolved': {
      value: 'warn',
      justification: `Warn developer when a path cannot be resolved.`,
    },
    'import/no-extraneous-dependencies': {
      value: ['error', {
        devDependencies: [
          '**/*.test.jsx',
          '**/*.test.tsx',
          '**/*.spec.jsx',
          '**/*.spec.tsx',
          'src/setupTests.js',
          '/src/utils/testing*',
        ],
      }],
      justification: `Importing dev dependencies is expected in tests, and
          so we instruct this rule to ignore testing files.
          See https://bit.ly/3eNmzW5 for more information.`,
    },
    'key-spacing': {
      // TODO: Switch over rule.
      // value : ['warn', {
      //   multiLine : { beforeColon: true, afterColon: true },
      //   align     : { beforeColon: true, afterColon: true, on: 'colon' },
      // }],
      value: 'off',
      justification: `This aligns the colon on object literals for increased
          readibility. This is disabled at present to prevent changes to too
          many files.`,
    },
    'no-plusplus': {
      value: ['error', { allowForLoopAfterthoughts: true }],
      justification: `It is best practice not to allow '++', but for-loops
          are conventionally written with them, and so we allow them here.`,
    },
    'no-unused-vars': {
      value: ['warn', { argsIgnorePattern: '^_' }],
      justification: `In general, unused variables should be deleted, but in
          instances where the developer would like to explicitly include an
          usused variable, they can deliberately acknowledge that the variable is
          meant to be used by prefixing it with an underscore. This is
          particularly useful when destructuring arrays.`,
    },
    'no-warning-comments': {
      // TODO: Enable this in the future once TypeScript conversion is complete.
      // value         : ['warn', { terms: ['bugbug', 'fixme', 'todo', 'xxx'] }],
      value: 'off',
      justification: `We do use warning comments to flag technical debt. This
          allows these flags to be raised to increase awareness that it exists.`,
    },
    'object-curly-newline': {
      value: 'off',
      justification: `Imports are cleaner to read and easier to reorder if
          they are in line with the object curly braces. This disables forcing
          them to be on new lines except where it would cause max-len to be
          violated.`,
    },
    'quote-props': {
      value: ['error', 'consistent-as-needed'],
      justification: `Consistency and readability. Seeing mixed quoting of
          object properties can be difficult to read.`,
    },
    'quotes': {
      value: ['error', 'single', {
        allowTemplateLiterals: true,
        avoidEscape: true,
      }],
      justification: `Single quotes are a team convention, and this allows for
          the usage of template literals and double quotes to avoid escaping.`,
    },
    'react/no-multi-comp': {
      // TODO: This should eventually become an error.
      value: ['warn', { ignoreStateless: true }],
      justification: `React best practice dictates one component per file for
          readability and reusability.`,
    },
    'react/prop-types': {
      // TODO: Delete this rule once TypeScript conversion is complete.
      value: 'off',
      justification: `This project does not use PropTypes and is transitioning
          to Typescript.`,
    },
    'react/require-default-props': {
      // TODO: Delete this rule once TypeScript conversion is complete.
      value: 'off',
      justification: `This project does not use PropTypes and is transitioning
          to Typescript.`,
    },
    'react-hooks/exhaustive-deps': {
      value: 'warn',
      justification: `We still want this to be flagged, but not to error.`,
    },
    'semi-style': {
      value: 'off',
      justification: `There are instances where developers might want to place
          semicolons in specific places for readability.`,
    },
    'space-before-function-paren': {
      value: ['error', {
        anonymous: 'never',
        named: 'never',
        asyncArrow: 'always',
      }],
      justification: `Improves readability, especially with TypeScript where
          types and generics might complicate a function signature.`,
    },
  }),
  overrides: [
    { // Typescript-specific config
      files: ['*.ts', '*.tsx'],
      parserOptions: {
        project: [
          './tsconfig.json',
        ],
      },
      extends: [
        'plugin:@typescript-eslint/recommended',
      ],
      rules: extractRules({
        '@typescript-eslint/no-empty-function': {
          value: 'off',
          justification: `Allowing no-ops are a team convention.`,
        },
        '@typescript-eslint/no-empty-interface': {
          value: 'off',
          justification: `Allows empty interfaces (primarily for 'react-table'
              types).`,
        },
        '@typescript-eslint/no-shadow': {
          value: ['error'],
          justification: `Reduces confusion with having to track variable name
              across scope.`,
        },
        'no-multi-spaces': {
          // TODO: Enable globally once TypeScript conversion is complete.
          value: 'off',
          justification: `Sometimes, multiple spaces can be better for
              redability, especially when defining types. This rule is enabled
              for JavaScript files, but not for TypeScript files.`,
        },
        'no-shadow': {
          value: 'off',
          justification: `Disable JS rule in favor of TS rule.`,
        },
        'no-use-before-define': {
          value: 'off',
          justification: `Disable so we can import react, rule has been known to report incorrect errors.`,
        },
      }),
    },
    { // JSX-specific config
      files: ['*.jsx', '*.tsx'],
      rules: extractRules({
        'jsx-a11y/anchor-is-valid': {
          // TODO: This should be converted to an error eventually.
          value: 'off',
          justification: `Preexisting team convention.`,
        },
        'jsx-a11y/click-events-have-key-events': {
          // TODO: This should be converted to an error eventually.
          value: 'off',
          justification: `Preexisting team convention.`,
        },
        'jsx-a11y/no-static-element-interactions': {
          // TODO: This should be converted to an error eventually.
          value: 'off',
          justification: `Preexisting team convention.`,
        },
        'react/jsx-max-props-per-line': {
          value: ['warn', { maximum: 1 }],
          justification: `Keeping each prop on its own line increases
              readability for JSX files.`,
        },
        'react/jsx-props-no-spreading': {
          value: 'off',
          justification: `Preexisting team convention.`,
        },
        'react/react-in-jsx-scope': {
          value: 'off',
          justification: `React 17, which we are using, does not require React
              to be in scope when using JSX.`,
        },
      }),
    },
    { // Test-specific config
      files: [
        '**/*.spec.jsx',
        '**/*.spec.tsx',
        '**/*.test.jsx',
        '**/*.test.tsx',
      ],
      extends: [
        'plugin:testing-library/react',
        'plugin:jest-dom/recommended',
      ],
    },
  ],
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
};

{
  "name": "react-blueprint",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@auth0/auth0-react": "^1.8.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.24",
    "@types/node": "^12.20.28",
    "@types/react": "^17.0.27",
    "@types/react-dom": "^17.0.9",
    "axios": "^0.22.0",
    "deserialize-json-api": "^1.4.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "typescript": "^4.4.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "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.13.0",
    "@types/react-router-dom": "^5.3.1",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-airbnb-typescript": "^14.0.1",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-jest-dom": "^3.9.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.26.1",
    "eslint-plugin-react-hooks": "^4.0.8",
    "eslint-plugin-testing-library": "^4.12.4"
  }
}

6


0