gaearon / gaearon/react-hot-loader

hmr + redux @connect() class decorator issue

Open
#1,120 9 comments 0 reactions 0 assignees View on GitHub
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

Change me

}
}

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

Change me

}
}
```

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.