Skip to content

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

Open
Open
Failed to compile - Failed to load config "react-app" to extend from#10463
Labels
issue: bug reportneeds triage

Description

@josephh
josephh
opened on Jan 28, 2021

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.

Activity

  1. josephh
    added
    issue: bug report
    needs triage
    on Jan 28, 2021

  2. AuroraLS3 commented on Feb 2, 2021

    @AuroraLS3
    AuroraLS3
    on Feb 2, 2021

    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

  3. guludo commented on Apr 5, 2021

    @guludo
    guludo
    on Apr 5, 2021

    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.

  4. fourpastmidnight commented on Apr 23, 2021

    @fourpastmidnight
    fourpastmidnight
    on Apr 23, 2021

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

  5. fourpastmidnight commented on Apr 23, 2021

    @fourpastmidnight
    fourpastmidnight
    on Apr 23, 2021

    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.

  6. jfgilmore
    added a commit that references this issue on Jul 6, 2021

    Resolved 'failed to compile' issue as per react/create-react-app#10463

    e971855
  7. sunwoo0706
    added a commit that references this issue on Sep 13, 2021

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

    dad519f

  8. bahalbach commented on Dec 17, 2021

    @bahalbach
    bahalbach
    on Dec 17, 2021

    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

  9. budaestew commented on Dec 19, 2021

    @budaestew
    budaestew
    on Dec 19, 2021

    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.

  10. virtuoushub commented on Dec 23, 2021

    @virtuoushub
    virtuoushub
    on Dec 23, 2021

    @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

  11. LukeNotable commented on Jan 27, 2022

    @LukeNotable
    LukeNotable
    on Jan 27, 2022

    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: "*"

  12. iShawnWang commented on Mar 26, 2022

    @iShawnWang
    iShawnWang
    on Mar 26, 2022

    Same issue here, i am using pnpm

  13. TallGirlVanessa commented on Apr 4, 2022

    @TallGirlVanessa
    TallGirlVanessa
    on Apr 4, 2022

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

  14. kasterra
    added a commit that references this issue on May 10, 2022

    🧹 chore: eslint config

    fe04d44
  15. seanstern
    added 2 commits that reference this issue on Jun 7, 2022

    Update client dependencies to enable build

    2566a9e

    Update common toolchain dependencies to use root workspace (#10)

    f3315d8

  16. Zamaletdinov commented on Sep 14, 2022

    @Zamaletdinov
    Zamaletdinov
    on Sep 14, 2022

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

  17. bric3 commented on Dec 9, 2022

    @bric3
    bric3
    on Dec 9, 2022

    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.

  18. identity16 commented on Dec 27, 2022

    @identity16
    identity16
    on Dec 27, 2022

    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 react-scripts@4.0.3, so upgraded to 5.
    After that the error is gone.

  19. ftnext
    added a commit that references this issue on May 30, 2024

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

    dbd6655
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    issue: bug reportneeds triage

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions