Yarn 3 PNP not compatible

[dylanplural]

If you are reporting a bug or having an issue setting up React Hot Loader, please fill in below. For feature requests, feel free to remove this template entirely.

Description

With yarn2+ (pnp enabled) is used for module resolution. hmr does not work as expected. The documented command
yarn add react-dom@npm:@hot-loader/react-dom
resolves in an error:

yarn add react-dom@npm:@hot-loader/react-dom
➤ YN0001: │ Error: react-dom@npm:@hot-loader/react-dom isn't supported by any available resolver

And the alternative (webpack aliases) results in a runtime error:

Compiled with problems:X

ERROR in ../../.yarn/__virtual__/@szhsin-react-menu-virtual-9328d7bf3c/0/cache/@szhsin-react-menu-npm-3.0.0-c9f0bfbaf8-cfa13060d2.zip/node_modules/@szhsin/react-menu/dist/es/components/ControlledMenu.js 3:0-41

Module not found: Error: Can't resolve 'react-dom' in ...

ERROR in ../../.yarn/__virtual__/@szhsin-react-menu-virtual-9328d7bf3c/0/cache/@szhsin-react-menu-npm-3.0.0-c9f0bfbaf8-cfa13060d2.zip/node_modules/@szhsin/react-menu/dist/es/components/SubMenu.js 3:0-41

Module not found: Error: Can't resolve 'react-dom' in ...

Environment

React Hot Loader version: 17.0.2

Run these commands in the project folder and fill in their results:

1. node -v: 16.14.2
2. npm -v: 8.5.0
3. yarn -v: 3.2.0

Then, specify:

1. Operating system: Windows 10
2. Browser and version: chrome latest

[nouoxu]

This is a known compatibility issue with Yarn 3 PnP. Since react-hot-loader is deprecated, here are your options:

1. Use React Fast Refresh (built into React 16.9+) - no extra dependencies needed
2. Use Yarn 2/3 with nodeLinker: node-modules instead of pnp
3. Try @pnp/pnpjs which has better compatibility

I recommend migrating to React Fast Refresh as it's the official replacement.

For quick JS prototyping, check out JSBin: https://github.com/nouoxu/jsbin