Failed to compile - Failed to load config "react-app" to extend from #10463

josephh · 2021-01-28T13:46:47Z

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?

No.

Which terms did you search for in User Guide?

"extend", "failed", "config"

Environment

npx create-react-app --info

Environment Info:

  current version of create-react-app: 4.0.1
  running from /Users/jjobbings/.nvm/versions/node/v12.20.1/lib/node_modules/create-react-app

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  Binaries:
    Node: 12.20.1 - ~/.nvm/versions/node/v12.20.1/bin/node
    Yarn: 2.4.0 - /usr/local/bin/yarn
    npm: 6.14.10 - ~/.nvm/versions/node/v12.20.1/bin/npm
  Browsers:
    Chrome: 88.0.4324.96
    Edge: Not Found
    Firefox: 79.0
    Safari: 13.1.2
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: 4.0.1

Steps to reproduce

yarn set version berry
create-react-app onboard --template typescript
cd onboard/
yarn start

Expected behavior

React app start web page to display

Actual behavior

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

Failed to compile.

Failed to load config "react-app" to extend from.
Referenced from: /Users/jjobbings/onboard/package.json

browser opened - showing same error output as terminal.

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

AuroraLS3 · 2021-02-02T07:30:22Z

I have this same issue without the typescript template

yarn set version latest
npx create-react-app application
cd application
yarn start

npx create-react-app --info

npx: installed 67 in 5.963s

Environment Info:

  current version of create-react-app: 4.0.1
  running from C:\Users\r_lah\AppData\Roaming\npm-cache\_npx\11236\node_modules\create-react-app

  System:
    OS: Windows 10 10.0.19042
    CPU: (16) x64 AMD Ryzen 7 2700X Eight-Core Processor
  Binaries:
    Node: 14.15.4 - S:\Programming Env Tools\node\node.EXE
    Yarn: 2.4.0 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.10 - S:\Programming Env Tools\node\npm.CMD
  Browsers:
    Chrome: 88.0.4324.104
    Edge: Spartan (44.19041.423.0), Chromium (88.0.705.56)
    Internet Explorer: 11.0.19041.1
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Running from PowerShell with ExecutionPolicy RemoteSigned -Scope CurrentUser

Attempted fixes:

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

guludo · 2021-04-05T23:13:06Z

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.

fourpastmidnight · 2021-04-23T21:17:13Z

@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 😉).

fourpastmidnight · 2021-04-23T21:26:56Z

Oh, and one more comment on this, I did not need to use nodeLinker: node_modules in the .yarnrc.yml file, as was stated on the migration page, typescript works just fine with the PnP linker. The missing package is all that's required to make the app work. Thanks.

…0463

bahalbach · 2021-12-17T06:16:47Z

The proposed solution yarn add eslint-config-react-app does not work for me because yarn is detecting it twice.


Plugin "react" was conflicted between "package.json » eslint-config-react-app » C:\Users\bhalb\programming\activity-tracker\.yarn\__virtual__\eslint-config-react-app-virtual-8e12459b5a\0\cache\eslint-config-react-app-npm-7.0.0-1ad319c3be-dac130cfcb.zip\node_modules\eslint-config-react-app\base.js" and "BaseConfig » C:\Users\bhalb\programming\activity-tracker\.yarn\__virtual__\eslint-config-react-app-virtual-6f6769fb06\0\cache\eslint-config-react-app-npm-7.0.0-1ad319c3be-dac130cfcb.zip\node_modules\eslint-config-react-app\base.js".

create-react-app already includes that and adding it should not be necessary.

If not added, then still getting the Failed to load config "react-app" issue

ERROR in Failed to load config "react-app" to extend from.
Referenced from: C:\Users\bhalb\programming\activity-tracker\package.json

budaestew · 2021-12-19T11:47:50Z

The proposed solution yarn add eslint-config-react-app does not work for me because yarn is detecting it twice.


Plugin "react" was conflicted between "package.json » eslint-config-react-app » C:\Users\bhalb\programming\activity-tracker\.yarn\__virtual__\eslint-config-react-app-virtual-8e12459b5a\0\cache\eslint-config-react-app-npm-7.0.0-1ad319c3be-dac130cfcb.zip\node_modules\eslint-config-react-app\base.js" and "BaseConfig » C:\Users\bhalb\programming\activity-tracker\.yarn\__virtual__\eslint-config-react-app-virtual-6f6769fb06\0\cache\eslint-config-react-app-npm-7.0.0-1ad319c3be-dac130cfcb.zip\node_modules\eslint-config-react-app\base.js".

create-react-app already includes that and adding it should not be necessary.

If not added, then still getting the Failed to load config "react-app" issue

ERROR in Failed to load config "react-app" to extend from.
Referenced from: C:\Users\bhalb\programming\activity-tracker\package.json

I solved it by adding pnpFallbackMode: all to .yarnrc.yml file.

virtuoushub · 2021-12-23T01:13:45Z

@bahalbach / @budaestew

I also solved this, but slightly differently; as I was similarly running into:

Plugin "react" was conflicted between "package.json » eslint-config-react-app » ...

What I did was:

yarn add -D eslint-config-react-app eslint@^8.0.0

instead of adding pnpFallbackMode: all to .yarnrc.yml file.

See also: https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app#usage-outside-of-create-react-app

edit this also works:

yarn add -D eslint-config-react-app eslint

LukeNotable · 2022-01-27T01:11:33Z

You will get varying results depending on whether you're using a classic node_modules (Yarn 1, Yarn 2+ with nodeLinker: node-modules), pnpm, or PnP (Yarn 2+ default). With node_modules, hoisting will sometimes cover up the underlying problem, although the hoisting behavior depends on what else is installed (pnpFallbackMode: all is also effectively restoring the hoisting). For regular PnP, however:

The starting point has the error:

Failed to load config "react-app" to extend from.

Which we can solve with:

yarn add -D eslint-config-react-app

But that leads to a new error:

Plugin "react" was conflicted between 
"package.json » eslint-config-react-app » /yadda-yadda/node_modules/eslint-config-react-app/base.js" 
and 
"BaseConfig » /yadda-yadda/node_modules/eslint-config-react-app/base.js".

As pointed out here, we can solve that in turn with a package extension in .yarnrc.yml:

packageExtensions:
  react-scripts@*:
    peerDependencies:
      eslint-config-react-app: "*"

iShawnWang · 2022-03-26T15:09:08Z

Same issue here, i am using pnpm

TallGirlVanessa · 2022-04-04T23:42:33Z

@LukeNotable That was a lifesaver, thank you for the detailed explanation and solution! Been looking for something that doesn't require downgrading anything.

I additionally needed to do yarn cache clean; yarn install but after that it worked.

Plugin "react" was confilcted... 관련 에러 해결 링크 facebook/create-react-app#10463

Because "eslintConfig": { "extends": [ "react-app" ] } in package.json would result in the following error during build: "Failed to load config "react-app" to extend from.", eslint-config-react-app was added as an explicit devDependency. Because adding eslint-config-react-app as a devDependency led to react plugin having a conflict in eslint-config-react-app packages, the following was added to .yarnrc.yml packageExtensions: react-scripts@*: peerDependencies: eslint-config-react-app: "*" See the following for explanation of above two: facebook/create-react-app#10463 (comment) Becase @testing-library/jest-dom's types were recognized by build command, @types/testing-library__jest-dom was added as a devDependency.

* Mirror IDE dependencies in root package See step 2 of https://yarnpkg.com/getting-started/migration#editor-support * Align typescript version to 4.4.2 Because latest (^4.7.2) doesn't seem to work with yarn pnp module resolution * Upgrade nodeLinker to pnp * Add VSCode Editor SDK for yarn pnp See https://yarnpkg.com/getting-started/editor-sdks#vscode * Update client dependencies to enable build Because "eslintConfig": { "extends": [ "react-app" ] } in package.json would result in the following error during build: "Failed to load config "react-app" to extend from.", eslint-config-react-app was added as an explicit devDependency. Because adding eslint-config-react-app as a devDependency led to react plugin having a conflict in eslint-config-react-app packages, the following was added to .yarnrc.yml packageExtensions: react-scripts@*: peerDependencies: eslint-config-react-app: "*" See the following for explanation of above two: facebook/create-react-app#10463 (comment) Becase @testing-library/jest-dom's types were recognized by build command, @types/testing-library__jest-dom was added as a devDependency. * Update .yarnrc.yml with peerDependencies Because many packages in create-react-app rely on implicit peerDependencies, they need to be stated explicitly. See https://yarnpkg.com/advanced/error-codes#yn0002---missing_peer_dependency for more info. * Update client package.json with devDependencies Because many top-level packages in create-react-app rely on implicit peerDependencies, they need to be stated explicitly. See https://yarnpkg.com/advanced/error-codes#yn0002---missing_peer_dependency for more info. * Remove deps in root from server/package.json Because root workspace needs eslint, prettier, typescript in order to enable vscode dev tools (c.f. b3441de) - eslint can be removed from server/package.json - prettier can be removed from server/package.json - typescript can be removed from server/package.json In addition, jest, rimraf shoudl be common across all workspaces. To enable server workspace level commands that depended on rimraf, tsc, and jest, use guidance at https://yarnpkg.com/getting-started/qa#how-to-share-scripts-between-workspaces * Remove deps in root from common-api/package.json Because root workspace needs eslint, prettier, typescript in order to enable vscode dev tools (c.f. b3441de) - eslint can be removed from common-api/package.json - prettier can be removed from common-api/package.json - typescript can be removed from server/package.json In addition rimraf should be common across all workspaces. To enable server workspace level commands that depended on rimraf and tsc use guidance at https://yarnpkg.com/getting-started/qa#how-to-share-scripts-between-workspaces * Update root deps, yarnrc packageExtensions Because "ts-node-dev@npm:2.0.0 [5e2e0] doesn't provide @types/node (pc8aba), requested by ts-node" and "root-workspace-0b6124@workspace:. doesn't provide @types/node (pde784), requested by ts-node" * Use root cleanscript in client/package.json * Align client prettier to root * Align client test script to other packages * Run eslint/prettier across cli, server

Zamaletdinov · 2022-09-14T15:03:45Z

@LukeNotable @vlmphipps Thanks a lot, that helped with with the issue :)

bric3 · 2022-12-09T10:49:22Z

Agreed thanks to @LukeNotable @vlmphipps, this fixed this problem.
Now to the next one, when does it stops...

Failed to compile.

fork-ts-checker-webpack-plugin error in undefined(undefined,undefined):
request.match is not a function or its return value is not iterable  TSINTERNAL

EDIT: It's gone, I'm not even sure how I got rid of this problem. AS it was kinda persistent for a few days.

identity16 · 2022-12-27T15:39:44Z

I also had the fork-ts-checker-webpack-plugin error too.

TL;DR
Downgrade TypeScript version enough or upgrade react-scripts to v5

In my case, i could get another message by building after tried pnpFallbackMode: all solution.

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.5.0

YOUR TYPESCRIPT VERSION: 4.9.4

Please only submit bug reports when using the officially supported version.

I thought I should upgrade the @typescript-eslint/typescript-estree.
After searching the yarn.lock file, I found out that it came from the react-scripts package.

I used [email protected], so upgraded to 5.
After that the error is gone.

facebook/create-react-app#10463 (comment)

josephh added issue: bug report needs triage labels Jan 28, 2021

jfgilmore added a commit to jfgilmore/super-jokes that referenced this issue Jul 6, 2021

Resolved 'failed to compile' issue as per facebook/create-react-app#1…

e971855

…0463

eungyeole mentioned this issue Sep 3, 2021

fix: load config "react-app" error #11367

Closed

sunwoo0706 added a commit to sunwoo0706/yarn_berry_test that referenced this issue Sep 13, 2021

와 해내따 facebook/create-react-app#10463

dad519f

nuke-web3 mentioned this issue Oct 4, 2021

Update to yarn v3 jimmychu0807/substrate-front-end-template#203

Merged

davidleesbir3 mentioned this issue Mar 31, 2022

ERROR in Plugin "react" was conflicted between ".eslintrc.json" and "BaseConfig creativetimofficial/material-dashboard-react#184

Closed

kasterra added a commit to kasterra/react-mini-proj that referenced this issue May 10, 2022

🧹 chore: eslint config

fe04d44

Plugin "react" was confilcted... 관련 에러 해결 링크 facebook/create-react-app#10463

brentertz mentioned this issue May 11, 2022

ESlint plugins are conflicted each other migrating to pnpm pnpm/pnpm#4619

Closed

woong-jae mentioned this issue Jun 25, 2022

error in failed to load config "react-app" to extend from CodeVault-CV/Client#3

Closed

benderillo mentioned this issue Oct 4, 2022

fix(react-scripts): add missing peer dependency react and update react-refresh-webpack-plugin #9872

Merged

3 tasks

ftnext added a commit to ftnext/be-good-friend-with-javascript that referenced this issue May 30, 2024

[bugfix] Fix error: Failed to load config "react-app" to extend from.

dbd6655

facebook/create-react-app#10463 (comment)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Failed to compile - Failed to load config "react-app" to extend from #10463

Failed to compile - Failed to load config "react-app" to extend from #10463

josephh commented Jan 28, 2021 •

edited

Loading

AuroraLS3 commented Feb 2, 2021 •

edited

Loading

guludo commented Apr 5, 2021

fourpastmidnight commented Apr 23, 2021

fourpastmidnight commented Apr 23, 2021

bahalbach commented Dec 17, 2021 •

edited

Loading

budaestew commented Dec 19, 2021

virtuoushub commented Dec 23, 2021 •

edited

Loading

LukeNotable commented Jan 27, 2022

iShawnWang commented Mar 26, 2022

TallGirlVanessa commented Apr 4, 2022

Zamaletdinov commented Sep 14, 2022

bric3 commented Dec 9, 2022 •

edited

Loading

identity16 commented Dec 27, 2022

Failed to compile - Failed to load config "react-app" to extend from #10463

Failed to compile - Failed to load config "react-app" to extend from #10463

Comments

josephh commented Jan 28, 2021 • edited Loading

Describe the bug

Did you try recovering your dependencies?

Which terms did you search for in User Guide?

Environment

Steps to reproduce

Expected behavior

Actual behavior

AuroraLS3 commented Feb 2, 2021 • edited Loading

guludo commented Apr 5, 2021

fourpastmidnight commented Apr 23, 2021

fourpastmidnight commented Apr 23, 2021

bahalbach commented Dec 17, 2021 • edited Loading

budaestew commented Dec 19, 2021

virtuoushub commented Dec 23, 2021 • edited Loading

LukeNotable commented Jan 27, 2022

iShawnWang commented Mar 26, 2022

TallGirlVanessa commented Apr 4, 2022

Zamaletdinov commented Sep 14, 2022

bric3 commented Dec 9, 2022 • edited Loading

identity16 commented Dec 27, 2022

josephh commented Jan 28, 2021 •

edited

Loading

AuroraLS3 commented Feb 2, 2021 •

edited

Loading

bahalbach commented Dec 17, 2021 •

edited

Loading

virtuoushub commented Dec 23, 2021 •

edited

Loading

bric3 commented Dec 9, 2022 •

edited

Loading