HMR crashes page with React when saving Provider Component

[iFreilicht]

🐛 bug report

When I save a file in my project (even if it wasn't changed) that provides a Context and the respective Provider, HMR will try to hot-reload the page and crash it in the process.

The error message is TypeError: _reactDefault.default.useContext(...) is undefined.

🎛 Configuration (.babelrc, package.json, cli command)

No babel, I just run

npm exec parcel public/index.html

🤔 Expected Behavior

I would expect the hot reload to work.

😯 Current Behavior

The page crashes with the following error:

``` TypeError: _reactDefault.default.useContext(...) is undefined ToastPlayground src/components/ToastPlayground/ToastPlayground.js:9:29 6 | import { ToastContext } from "../ToastProvider/ToastProvider"; 7 | 8 | function ToastPlayground() { > 9 | const { addToast } = React.useContext(ToastContext); | ^ 10 | 11 | return ( 12 |

renderWithHooks node_modules/react-dom/cjs/react-dom.development.js:16305:27 mountIndeterminateComponent node_modules/react-dom/cjs/react-dom.development.js:20074:12 beginWork node_modules/react-dom/cjs/react-dom.development.js:21587:15 callCallback node_modules/react-dom/cjs/react-dom.development.js:4164:13 invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js:4213:15 invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js:4277:30 beginWork$1 node_modules/react-dom/cjs/react-dom.development.js:27451:28 performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:26557:11 workLoopSync node_modules/react-dom/cjs/react-dom.development.js:26466:22 renderRootSync node_modules/react-dom/cjs/react-dom.development.js:26434:6 performSyncWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:26085:34 flushSyncCallbacks node_modules/react-dom/cjs/react-dom.development.js:12042:21 flushSync node_modules/react-dom/cjs/react-dom.development.js:26201:6 scheduleRefresh node_modules/react-dom/cjs/react-dom.development.js:27795:14 .hdge7

💁 Possible Solution

If only I knew 🤷

🔦 Context

I wanted to create a Provider component to avoid prop drilling as part of an exercise.

💻 Code Sample

See https://github.com/iFreilicht/project-toast/tree/parcel-hmr-repro. To quote the README:

To reproduce the issue, run

npm install
npm run dev

The server will start at http://localhost:1234/. Open that page.

Then, run

touch src/components/ToastProvider/ToastProvider.js

This will crash the page.

🌍 Your Environment

Software	Version(s)
Parcel	2.10.3
Node	20.4.0
npm/Yarn	npm 9.7.2
Operating System	macOS 14.1.1

[k1941996]

Same with me it, it can break anything. I got an issue with 'react' is not found. Also, HMR does not work when you use useContext.

Modify any code anywhere in the source code, the page refreshes. HMR does not work. Also states get reset. tried preserving the logs. it crashes the code.