Fix react-refresh package exports

[lgoodcode]

Summary

Fixed an error that occurred when using CRA with typescript. Uninstalled
the react-refresh package and reinstalled as well as deleted and
rebuilt the package-lock.json file and the error still persisted.
Adding an additional entry for the exports property in the
package.json file fixed it.

Error log:
ERROR in ./src/index.tsx
Module build failed: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './runtime.js' is not defined by "exports" in Q:\whitelist\node_modules\react-refresh\package.json
at new NodeError (node:internal/errors:371:5)
at throwExportsNotFound (node:internal/modules/esm/resolve:429:9)
at packageExportsResolve (node:internal/modules/esm/resolve:703:3)
at resolveExports (node:internal/modules/cjs/loader:482:36)
at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
at Function.resolve (node:internal/modules/cjs/helpers:108:19)
at Object. (Q:\whitelist\node_modules@pmmmwh\react-refresh-webpack-plugin\loader\index.js:20:4)
at Module._compile (node:internal/modules/cjs/loader:1097:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10)

How did you test this change?

It doesn't directly affect any code in the package or in React in general since it just adds an additional glob path for the same file that is exported. I still ran the tests though, despite not making any real changes, and resulted in 273 suites passed, 2 skipped, and 7 failed.

[sizebot]

Comparing: 4db3ff6...815ffec

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	131.30 kB	131.30 kB	=	41.96 kB	41.96 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	136.36 kB	136.36 kB	=	43.41 kB	43.41 kB
facebook-www/ReactDOM-prod.classic.js	=	432.72 kB	432.72 kB	=	79.59 kB	79.59 kB
facebook-www/ReactDOM-prod.modern.js	=	417.72 kB	417.72 kB	=	77.21 kB	77.21 kB
facebook-www/ReactDOMForked-prod.classic.js	=	432.72 kB	432.72 kB	=	79.59 kB	79.59 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 815ffec

[gaearon]

Can you please provide a reproducing project?

[TrejGun]

Can confirm this bug

[TbIKoBKa]

Also bump into such bug

[peterc8191]

Hi,

I have the same issue and can verify that the fix provided works for me.
Some details:

I have created the app using CRA.
I am using:
react: 17.0.2
react-scripts: 5.0.0
webpack: 5.70.0

Steps to reproduce the error:

Clear the Node modules
Delete package.lock.json file
Run npm install
Run npm start

[lgoodcode]

Can you please provide a reproducing project?

I wasn't able to reproduce the error from a new react project. I'm not sure how the error originated as I didn't make any changes to my package.json file and it started happening out of nowhere when I restarted the server.

[gaearon]

Also bump into such bug

Can confirm this bug

Please provide a reproducing project. Thank you. If you don’t have one, +1 comments are not necessary. They create noise for every person watching this repository.

[lgoodcode]

Would a clone of my project that can produce the error work? This is my first time making a contribution so I'm not sure if you want a newly created project that isn't modified.

[gaearon]

Yes, a clone would work!

[lgoodcode]

Here is a link to clone the repository: https://github.com/toomuchrice4u/whitelist.git

I just made a clone and tested it and I think the cause was the update of the react-refresh from 0.11.0 to .12.0. Looking at the commit history for version 0.12.0, I found the commit where they added the exports field in package.json, which I believe is causing the error when looking for the file at the path.

[gaearon]

Thanks! I know what the commit was but what I’m confused about is why your project imports it with the extension. I will have a look at this later.

[lgoodcode]

I think exports is overriding main. It already has files so I think it is redundant? I also removed the exports property which let it run normally again, as it was in 0.11.0.

[gaearon]

OK, so the issue here is that you installed react-refresh@0.12.0 which is not yet compatible with the latest version of @pmmmwh/react-refresh-webpack-plugin. So the fix is to downgrade to react-refresh@0.11.0.

The problem with @pmmmwh/react-refresh-webpack-plugin has already been solved in pmmmwh/react-refresh-webpack-plugin#576 but there is no release yet that contains that fix.

You can track that issue in pmmmwh/react-refresh-webpack-plugin#619.

There are no changes needed in the React repo.

[gaearon]

I have verified that the instructions in #24235 (comment) do not reproduce the issue. Since react-scripts depends on react-refresh@^0.11.0, if you have this error, it's because you have updated react-refresh to 0.12.0 — there was no way for it to automatically update. I've checked that just removing node_modules and package lock and then running npm install after creating a CRA project does not cause this problem.