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

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

npx create-react-app@next --scripts-version=@next --template=cra-template@next my-js-app
cd my-js-app
yarn set version berry
yarn set version latest
yarn install
yarn start

Expected behavior

App is served without problems.

Actual behavior

App throws an error.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 4
Comments: 17 (6 by maintainers)

Most upvoted comments

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

+14

eddiemonge on Aug 6, 2020

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

pmmmwh on Sep 6, 2020

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.

pmmmwh on Aug 7, 2020

When I add react-refresh to dependencies, it still doesn’t work. I get a new error, Failed to load config "react-app" to extend from.

Edit: Possible solution! run yarn add react-refresh eslint-config-react-app

derekschinke on Oct 24, 2020

I just setup create-react-app using Yarn 2 today and I got this error. What is the proposed resolution for this?

arvinsim on Jan 10, 2021

For now I assume it’s either going back to Yarn Classic

@volodymyr-kushnir Or you know, enabling the node-modules linker in V2 using yarn config set nodeLinker node-modules or simply adding the missing dependencies using yarn add react-refresh eslint-config-react-app

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

@eddiemonge That’s not a solution and it’s not an issue in Yarn 2’s PnP mode, they are simply undeclared dependencies

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.

@pmmmwh It would be better for the plugin to resolve the import before injecting it, that way it works no matter what, PR at https://github.com/pmmmwh/react-refresh-webpack-plugin/pull/230

merceyz on Oct 24, 2020

Add it as a dependency until https://github.com/facebook/create-react-app/pull/9872 is merged

merceyz on Jan 10, 2021

Hitting this error now. Does react-refresh go into devDependencies, or dependencies?

jkolyer on Oct 24, 2020

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

volodymyr-kushnir on Aug 6, 2020