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

[josephh]

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

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

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.

[AuroraLS3]

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

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]

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 https://github.com/eslint/eslint/issues/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]

@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]

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.

[bahalbach]

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]

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]

@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]

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]

Same issue here, i am using pnpm

[TallGirlVanessa]

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

[Zamaletdinov]

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

[bric3]

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]

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.