4.0.0-next.77 sample app yields "Module not found: Your application tried to access react-refresh" when started with Yarn 2

[volodymyr-kushnir]

Describe the bug

create-react-app@4.0.0-next.77 yields "Module not found: Your application tried to access react-refresh, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound." after running yarn start with Yarn 2. Installing react-refresh as dependency solves the problem, tho.

Environment

Environment Info:

  current version of create-react-app: 4.0.0-next.77
  running from /Users/v.kushnir/.npm/_npx/57508/lib/node_modules/create-react-app

  System:
    OS: macOS 10.15.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 12.16.3 - /usr/local/bin/node
    Yarn: 2.1.1 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 84.0.4147.105
    Edge: Not Found
    Firefox: Not Found
    Safari: 13.1.2
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. npx create-react-app@next --scripts-version=@next --template=cra-template@next my-js-app
2. cd my-js-app
3. yarn set version berry
4. yarn set version latest
5. yarn install
6. yarn start

Expected behavior

App is served without problems.

Actual behavior

App throws an error.

[volodymyr-kushnir]

So if I understand correctly, react-refresh-webpack-plugin basically injects require("react-refresh/runtime"); into every module and then, when webpack asks for it, Yarn 2 thinks that the call is actually coming from my own modules and, since I haven't listed react-refresh as a dependency, it complains.

It seems like we can't fix it other than adding a note to the README.md asking people, who use Yarn 2, to also install react-refresh. Or we can make it a peer dependency and ask everybody to install it, and that would probably be more semantically correct, I'm not sure.

[eddiemonge]

So crazy story. Do npm install and then try starting it again. To me, that seems like a bug in Yarn2

[volodymyr-kushnir]

@eddiemonge it works with npm and it works with Yarn 1.22.4 as well, because both of them use node_modules. Yarn 2 on the other hand keeps packages in .yarn/cache and complains if packages try to require modules they didn't list as their dependencies, because, even though it has react-refresh hoisted to the top, modules must explicitly list versions of dependencies they need.
What I'm saying is that create-react-app 4 won't work with PnP in Yarn 2 unless react-refresh is also listed as a dependency 🤷🏼‍♂️. All other setups would work fine. I'm just curious if anybody has an elegant solution for this specific use case.

[pmmmwh]

Maintainer of the fast refresh plugin here.

To me, that seems like a bug in Yarn2

Technically speaking, it is always unsound to import something that you haven't listed in your dependencies. Through hoisting it might work (for example in CRA v3 @babel/core), but importing stuff that was never listed means the installation chain is prone to breakage.

So if I understand correctly, react-refresh-webpack-plugin basically injects require("react-refresh/runtime"); into every module and then, when webpack asks for it, Yarn 2 thinks that the call is actually coming from my own modules and, since I haven't listed react-refresh as a dependency, it complains.

Yes, that is the case. We had to do that (kinda like how @babel/runtime works) because there is no other way for us to inject a globally available dependency throughout the bundle without leaking implementation into the actual global scope.

What I'm saying is that create-react-app 4 won't work with PnP in Yarn 2 unless react-refresh is also listed as a dependency

To me I think the best resolution to this problem would be to list react-refresh as an installed dependency by default in the templates, and also a peerDependency of react-scripts. While this kinda breaks the "single-dependency" promise, given that we're already shipping RTL as a default in the templates, I don't see how this is problematic.

I can PR this change (or actually, anyone can do it) - but I'll wait for the maintainers' point of view on this before progressing.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[pmmmwh]

Bump - I think I'll proceed on making a PR to push further discussions.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[pmmmwh]

Bump - #9671