Error failed to load config react app to extend from

Collapse

Expand

Collapse

Expand

I have got the same issue.

• I deleted package-lock.json and node_modules
• ran ‘npm install’

It worked fine.

After getting the message «Failed to load config “react-app” to extend from…
I removed the following lines from package.json:

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

And it worked

For fixing this issue you need to run this command in your project folder.
First step:

yarn set version berry

After run that, one file and folder will be generated in your local folder (Project folder) :

• .yarnrc.yml(file)
• .yarn(folder)

Second step: Add nodeLinker: node-modules in your .yarnrc.yml file

Third step: run this command yarn install

Finally run yarn start

Tip : This approach is useful when you want to migrate from yarn 1.x to 2.x or 3x or higher.

even I had this issue, listing down steps to solve this issue.

1. First remove node modules and install node modules again.
2. Then I had a issue while I run npm run build, I was getting react-scripts not found. So I installed react-scripts using npm
3. Then I had this issue failed to load config react-app to extend form. I fixed it using

npm add eslint-config-react-app

I’ve faced the same error when I was trying to deploy my create-react-app template to Vercel.

1. Deleting yarn.lock file
2. (On Vercel Dashboard) Overriding build command from auto to «npm run build»
3. (On Vercel Dashboard) Overriding install command from auto to «npm install»

helped me to deploy successfully.

I was having the same issue. I did these steps and it worked.

Install it as a dependency

npm i eslint-config-react-app

then in your root folder, create a file name .eslintrc.json and add this code in that file

  "extends": "react-app"

If you use yarn:

1- Delete: node_modules and yarn.lock
2- Run: yarn install

Note: For npm should be the same approach.

If you cloned the repo from GitHub or any other version control system, try adding this file .eslintrc.json to your root folder. Don’t forget the . at the beginning.

The first answer works like a charm as well. Just thought I would add mine as well.

I was going through the same tutorial and came across the same problem. I figured out a few things:

The package eslint-config-react is outdated. It hasn’t been updated in 4 years, so I uninstalled that and instead installed (as a devDependency) eslint-config-airbnb. There are other eslint config packages, but Airbnb’s style guide I heard is very popular. Then in my eslintrc file I replaced "extends": "react" to "extends": "airbnb" :

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "env": {
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

The problem is the eslint-config-react package.

Leaving this here for future reference:

In my case this was happening because I was using Lerna and it was hoisting up some of the necessary dependencies. Adding nohoist option to the lerna.json file resolved the issue for me:

"nohoist": [
  "*react*",
  "*react*/**",
  "*react-native*",
  "*react-native*/**"
],

If you have eslint in your dependencies, remove that.
The eslint from react-scripts will be used

"eslint": "^7.32.0"

I fix it installing eslint-config-react-app package manually:

yarn add eslint-config-react-app -D

# or

npm install -D eslint-config-react-app

When I removed

  "extends": [
      "react-app"
    ]
  },

from package.json it worked.

This is because the eslint-config-react-app package is outdated.

I had a similar problem with create-react-app and I did

yarn add eslint-config-react-app -D

I think you should try:

yarn add eslint-config-react -D

Failed to load config «react-app» to extend from.

Failed to load config «react-app» to extend from.

why Failed to load config «react-app» to extend from.

Привет, после обновления до версии 7.0.0 я вижу эти ошибки сборки:

Расскажите нам о своей среде

• Версия ESLint: v7.0.0
• Версия узла: v13.14.0
• npm Версия: v13.14.0
• react-scripts Версия: v3.4.1

Какой парсер (по умолчанию, Babel-ESLint и т. Д.) Вы используете?
Один сценарий реагирования, который используют, default я думаю.

Пожалуйста, покажите свою полную конфигурацию:

Конфигурация

{
  "extends": ["react-app"],
  "plugins": [
    "react-hooks"
  ],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "no-use-before-define": [
      "error",
      {
        "functions": true,
        "classes": true,
        "variables": true
      }
    ]
  }
}

Что ты сделал?

Это выбрасывается из всех компонентов insde src.

  yarn eslint "src/**"

Чего вы ожидали?
Следует провести проверки, как в v.6.

Что на самом деле произошло?

./src/components/StandardDialogContent/StandardDialogContent.tsx
Failed to load config "react-app" to extend from.
Referenced from: /home/runner/work/emagine/emagine/.eslintrc

Вы готовы отправить запрос на перенос, чтобы исправить эту ошибку?
Да, хотя я не знаю, является ли это ошибкой eslint или предполагаемым поведением, и вместо этого CRA — лучшее место для решения этой проблемы.

archived due to age
auto closed
bug
evaluating

Следует выполнить проверки, как в v.7.

Для ясности, вы имеете в виду, как вел себя ESLint v6?

Я предполагаю, что вам может потребоваться использовать новый флаг --resolve-plugins-relative-to CLI, поскольку разрешение плагина изменилось в версии 7 .

Для ясности, вы имеете в виду, как вел себя ESLint v6?

Ах, извините, да, я имел в виду v6.

Спасибо, что поделился. Я проверил расположение eslint-config-react-app и он находится под node_modulesreact-scriptsnode_modules что означает, что он игнорируется — хотя я не уверен, действительно ли это имеет значение здесь, поскольку я пытался отрицать это !/**/node_modules/* но eslint по-прежнему не может найти конфигурацию react-app .

Проблему можно решить с помощью:

yarn add eslint-config-react-app @typescript-eslint/[email protected] @typescript-eslint/[email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] [email protected]

Но думаю, это далеко не идеально.

Из-за того, что я запускаю eslint через react-scripts я думаю, что не могу передать --resolve-plugins-relative-to в eslint. Не удалось найти никакой возможности установить это внутри .eslintrc . В настоящее время я вижу единственный способ выбросить CRA (чего я бы не хотел делать). Если у вас есть другие идеи, поделитесь. Я постараюсь найти более чистое решение на выходных.

Я обнаружил, что основная причина, вероятно, заключается в изменении шаблона игнорирования по умолчанию.

Шаблоны игнорирования влияют только на цели lint, поэтому они не связаны с загрузкой конфигурации / плагина.

Не могли бы вы предоставить конкретные шаги для воспроизведения?
Я бы хотел его отладить, но не знаю, как это воспроизвести.

Я пытался:

npx create-react-app foo
cd foo
npm i eslint<strong i="12">@latest</strong>
npx eslint "src/*"

но он работает хорошо (он должен использовать настройку "extends": "react-app" ).

Надеюсь, я нашел проблему. И я подтверждаю, что @bartlomiejzuber видит, что eslint-config-react-app находится ниже node_modulesreact-scriptsnode_modules .

Это происходит только в том случае, если вы используете для настройки пряжу. npm приносит eslint-config-react-app прямо под node_modules.

Я сделал:

npx create-react-app appy —template typescript
cd приложение
npm я eslint @ последний
удалена папка node_modules
удалить yarn.lock
удален package.lock
удалена запись конфигурации eslint в package.json
добавлен в package.json новый скрипт «lint»: «eslint » src / ** «»
добавлен .eslintrc.js

module.exports = {
  root: true,
  extends: ['react-app'],
};

пряжа
пряжа

Шаблоны игнорирования влияют только на цели lint, поэтому они не связаны с загрузкой конфигурации / плагина.

Да, это неправильный путь.

Это происходит только в том случае, если вы используете для настройки пряжу. npm добавляет приложение eslint-config-response-app прямо в node_modules.

Правильно, только что попробовал, и действительно проблема существует при использовании yarn вместо npm . Хороший улов @ldrick . 👍

npx create-react-app appy --template typescript
cd app
npm i eslint<strong i="5">@latest</strong>
removed folder node_modules
remove yarn.lock
removed package.lock
removed eslint config entry in package.json
added in package.json new script "lint": "eslint "src/**""
added .eslintrc.js

Это делает ошибку правильным поведением.
Поскольку app/package.json не имеет eslint-config-react-app , это означает, что require("eslint-config-react-app") перестанет работать, но ваш .eslintrc.js зависит от eslint-config-react-app .

На самом деле, популярные менеджеры пакетов имеют «дедупликационное» поведение, и побочный эффект «дедупликации» иногда менял require(foo) для косвенных зависимостей, в результате require("eslint-config-react-app") выглядит случайно работающим.

В вашем случае установка нового eslint изменила побочный эффект «дедупликации», и вы получили ошибку. Вам понадобится yarn add eslint-config-react-app и несколько одноранговых служб, чтобы использовать его.

К сожалению, интереса со стороны команды, похоже, не хватило.
или сообщество, чтобы реализовать это изменение. Пока мы хотим, чтобы мы могли
удовлетворить запросы каждого, нам нужно расставить приоритеты. Мы нашли
проблемы, которые не могут получить статус принятого через 21 день, как правило,
никогда не приниматься, и поэтому мы закрываем эти вопросы .
Это не значит, что идея не интересна или бесполезна, просто она
не то, что команда может взять на себя.

Спасибо за вклад в ESLint и ценим ваше понимание.