Module not found: Can't resolve 'react-refresh/runtime' in create-react-app v4

[Nightliss]

pnpm version:

5.10.2

Code to reproduce the issue:

1. pnpx create-react-app test
2. cd /test
3. yarn start - this works
4. rm -rf /node_modules, rm yarn.lock
5. pnpm i
6. pnpm start - getting error Module not found: Can't resolve 'react-refresh/runtime'

Expected behavior:

app compiles successfully

Actual behavior:

getting error Module not found: Can't resolve 'react-refresh/runtime'

Additional information:

• node -v prints: v12.19.0
• Windows, OS X, or Linux?: Windows10 Pro build 2004

[statianzo]

react-refresh is a nested dependency of react-scripts, not the app itself.

Looks like it's new to CRA 4.0 from a few days ago

https://github.com/facebook/create-react-app/blob/95265c34ff9e1c0881c7d9acc37d17f465629fa2/CHANGELOG.md#400-2020-10-23

You can disable the injection of react-refresh/runtime by setting an environment variable FAST_REFRESH=false

FAST_REFRESH=false pnpm start

You could also fix it by adding a dependency pnpm add -D react-refresh so it's top level within node_modules.

[GonzaloRizzo]

Why pnpm does not install this dependency? It seems to be declared on webpack's package.json

[statianzo]

Why pnpm does not install this dependency? It seems to be declared on webpack's package.json

pnpm does install it. It's just not hoisted to node_modules because the app's package.json doesn't contain react-refresh.

react-refresh-webpack-plugin is assuming the a flat node_modules when injecting react-refresh/runtime.

dependencies:
react-scripts 4.0.0
├─┬ @pmmmwh/react-refresh-webpack-plugin 0.4.2
│ └── react-refresh 0.8.3 peer
└── react-refresh 0.8.3

[merceyz]

Will be fixed upstream in facebook/create-react-app#9872

[hinell]

Issue

• I can confirm that this happens only if node_modules gets deleted. Otherwise it works fine
• It's not an issue of the pnpm itself, rather, it's CRA fault as pointed above

Versions affected

• linux Ubuntu, x86_64, NodeJS 12.18.3
• linux Ubuntu, x86_64, NodeJS 15.0.1

[dkozar]

I noticed a typo above. It should be FAST_REFRESH and not FAST_REFESH.

[statianzo]

I noticed a typo above. It should be FAST_REFRESH and not FAST_REFESH.

Fixed. Thanks 🙌