gaearon / gaearon/react-hot-loader
hmr + redux @connect() class decorator issue
- Dominant language
- JavaScript
- Stars
- 12.2k
- Forks
- 775
- PR merge metrics
- No merged PRs in 30d
Description
### Description
When using babel's `@babel/plugin-proposal-decorators` with redux's connect HOC and you make changes to the file the app updates but displays the old code.
Here's the normal way which works as expected when you change the file:
```javascript
class Test extends Component {
render() {
return
}
}
export default connect()(Test)
```
If you use the class decorator it no longer renders new code:
```javascript
@connect()
export default class Test extends Component {
render() {
return
}
}
```
I've tested this with other HOC like react-router's `withRouter` and the class decorator works fine. I'm unsure if this issue has to do with babel, hmr, or maybe I'm missing something obvious. I also transpiled the code with babel cli manually and tested the code it produces but that works fine, which is weird.
### Expected behavior
The file should hot reload successfully whether you're using the standard method or class decorator.
### Actual behavior
When using redux connect as a class decorator old code gets rendered as you change the file.
### Environment
React Hot Loader version: 4.3.12
Node: v8.12.0
npm: 6.4.1
@babel/core: 7.2.0
@babel/plugin-proposal-decorators: 7.2.0
Operating system: macOS Mojave 10.14.1
Browser and version: Chrome 70.0.3538.110
### Reproducible Demo
[Here's an example repo](https://github.com/rbdrenn/hmr-decorator-test)
Contributor guide
Research direction
Start by running the linked reproducible demo with the listed React Hot Loader, Babel, Node, and browser versions. Compare edits using connect() as a wrapper with the @connect() decorator; done means changes render correctly in both forms during hot reload.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- babel, javascript, react, redux
- Domain
- devtools, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 30/100