gaearon / gaearon/react-hot-loader
Hot-reloading doesn't work with 'yarn link' modules with hooks.
- Dominant language
- JavaScript
- Stars
- 12.2k
- Forks
- 775
- PR merge metrics
- No merged PRs in 30d
Description
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
What you are reporting:
Running hot reloading stops working when using yarn link on a package with hooks.
### Expected behavior
What you think should happen:
Everything should run fine.
### Actual behavior
What actually happens:
```
Error: Hooks can only be called inside the body of a function component.2 react.development.js:128
invariant 3React
RestProvider provider.js:45
ProxyFacade React (react-hot-loader.development.js#793)
mountIndeterminateComponent react-dom.development.js:14793
beginWork react-dom.development.js:15298
performUnitOfWork react-dom.development.js:18133
workLoop react-dom.development.js:18178
callCallback react-dom.development.js:150
invokeGuardedCallbackDev react-dom.development.js:200
invokeGuardedCallback react-dom.development.js:257
replayUnitOfWork react-dom.development.js:17420
renderRoot react-dom.development.js:18292
performWorkOnRoot react-dom.development.js:19171
performWork react-dom.development.js:19053
performAsyncWork react-dom.development.js:19027
flushFirstCallback scheduler.development.js:107
flushWork scheduler.development.js:219
onmessage scheduler.development.js:580
```
react-hot-loader.development.js
```
// eslint-disable-next-line func-names
_ProxyFacade = function ProxyFacade(props, context) {
var result = CurrentComponent(props, context); // this is the line
```
(Note: RestProvider is the functional component using hooks from the library rest-hooks)
### Environment
React Hot Loader version:
"react": "16.8.0-alpha.1",
"react-dom": "16.8.0-alpha.1",
"@hot-loader/react-dom": "16.8.0-alpha.0",
"react-hot-loader": "^4.6.5",
Run these commands in the project folder and fill in their results:
1. `node -v`: 11.4.0
2. `npm -v`:6.4.1
yarn: 1.13.0
Then, specify:
1. Operating system: WSL Ubuntu 18.04 on Windows 10
2. Browser and version: firefox and chrome latest
### Reproducible Demo
Please take the time to create a new project that reproduces the issue.
You can copy your project that experiences the problem and start removing things until you’re left with the minimal reproducible demo. This helps contributors, and you might get to the root of your problem during that process.
Push to GitHub and paste the link here.
https://github.com/ntucker/anansi/tree/master/examples/typescript
This is actually the project I'm using.
Contributor guide
Research direction
Start with the linked examples/typescript project and reproduce the failure using yarn link with a package that contains a hooks-based component. Then inspect react-hot-loader.development.js at the ProxyFacade call shown in the stack trace and compare behavior with an unlinked package. Done means hot reloading works for the linked component without the hooks error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100