Repository navigation
4.0.0-next.77 sample app yields "Module not found: Your application tried to access react-refresh" when started with Yarn 2 #9446
Description
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-appcd my-js-appyarn set version berryyarn set version latestyarn installyarn start
Expected behavior
App is served without problems.
Actual behavior
App throws an error.
Activity
[-]4.0.0-next.77 example app yields "Module not found: Your application tried to access react-refresh" when started with Yarn 2[/-][+]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 commentedon Aug 6, 2020
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 listedreact-refreshas 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 commentedon Aug 6, 2020
So crazy story. Do
npm installand then try starting it again. To me, that seems like a bug in Yarn2volodymyr-kushnir commentedon Aug 6, 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-refreshhoisted 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-refreshis 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 commentedon Aug 7, 2020
Maintainer of the fast refresh plugin here.
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.Yes, that is the case. We had to do that (kinda like how
@babel/runtimeworks) 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.To me I think the best resolution to this problem would be to list
react-refreshas an installeddependencyby default in the templates, and also apeerDependencyofreact-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 commentedon Sep 6, 2020
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 commentedon Sep 6, 2020
Bump - I think I'll proceed on making a PR to push further discussions.
stale commentedon Oct 12, 2020
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 commentedon Oct 18, 2020
Bump - #9671
jkolyer commentedon Oct 24, 2020
Hitting this error now. Does
react-refreshgo intodevDependencies, ordependencies?derekschinke commentedon Oct 24, 2020
When I add
react-refreshtodependencies, 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-appvolodymyr-kushnir commentedon Oct 24, 2020
Oh yeah, same.
4.0.0-next.77 and 4.0.0-next.98 would work, but stable 4.0.0 won't, unless you remove eslintConfig key from your package.json. I haven't figured it out yet, but it seems like react-scripts instructs ESLint to extend the react-app config and it works as long as you don't extend the ESLint config with your own rules, because then react-app is nowhere to be found by ESLint, since normally it would look into node_modules which isn't here, and it can't rely on Yarn, because this config isn't listed in the dependencies either 🤷🏼♂️.
For now I assume it's either going back to Yarn Classic or not extending the default CRA ESLint config ⚖️. Having Yarn 2 is nice. Having a customized linter is also nice. Bummer 😔.
merceyz commentedon Oct 24, 2020
@volodymyr-kushnir Or you know, enabling the
node-moduleslinker in V2 usingyarn config set nodeLinker node-modulesor simply adding the missing dependencies usingyarn add react-refresh eslint-config-react-app@eddiemonge That's not a solution and it's not an issue in Yarn 2's PnP mode, they are simply undeclared dependencies
@pmmmwh It would be better for the plugin to resolve the import before injecting it, that way it works no matter what, PR at pmmmwh/react-refresh-webpack-plugin#230
volodymyr-kushnir commentedon Oct 24, 2020
@merceyz Plug'n'Play is what I'm after, so node-modules linker is not an option, but adding missing dependencies might be. Followed your advise and did
yarn add --exact eslint-config-react-app, but got another error —Resolve error: unable to load resolver "node" import/no-duplicates— so then I've alsoyarn add --exact eslint-import-resolver-nodeand it worked 🎉🥳. Thank you very much 👏!stale commentedon Dec 25, 2020
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.
JLarky commentedon Dec 25, 2020
arvinsim commentedon Jan 10, 2021
I just setup create-react-app using Yarn 2 today and I got this error. What is the proposed resolution for this?
merceyz commentedon Jan 10, 2021
Add it as a dependency until #9872 is merged