gaearon / gaearon/react-hot-loader

Hot-reloading doesn't work with 'yarn link' modules with hooks.

Open
#1,171 1 comment 5 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.