gaearon / gaearon/react-hot-loader
Doesn't update class properties
- Dominant language
- JavaScript
- Stars
- 12.2k
- Forks
- 775
- PR merge metrics
- No merged PRs in 30d
Description
### Description
If I update value in class properties the page is redrawn only after the first change, then the value does not change.
### Start
In render:
`{this.test()}`
test function:
`test = () => {
debugger;
return '1'
};`
### Steps
1. Open page
file:
> _defineProperty(_assertThisInitialized(_this), "test", function () {
> debugger;
> return '1';
> });
2. Change return value to '2'
file:
> _defineProperty(_assertThisInitialized(_this), "test", function () {
> debugger;
> return '2';
> });
loader:
> ( function REACT_HOT_LOADER_SANDBOX () {
> var _this = this; // common babel transpile
>
>
> return function () {
> debugger;
> return '2';
> };
> }).call(this)
3. Change return value to '3'
file:
> _defineProperty(_assertThisInitialized(_this), "test", function () {
> debugger;
> return '3';
> });
loader:
> (function REACT_HOT_LOADER_SANDBOX () {
> var _this = this; // common babel transpile
>
>
> return function () {
> debugger;
> return '2';
> };
> }).call(this)
if I use `test () { ... };`
there is not problem
### .babelrc
> {
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-arrow-functions",
"@babel/plugin-transform-destructuring"
],
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
### Webpack
> {
test: /\.js?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
plugins: !isProduction ? [
"react-hot-loader/babel"
] : [
"@babel/plugin-transform-runtime",
]
}
}
}
### Root
> import 'core/polyfills';
>
> import { hot } from 'react-hot-loader/root';
>
> import React from 'react';
> import ReactDOM from 'react-dom';
> import Root from './Root';
>
> import './css/main.styl';
>
> const App = hot(Root);
>
> ReactDOM.render(
> ,
> document.getElementsByClassName('b-app-wrapper')[0]
### Environment
React Hot Loader version:
Run these commands in the project folder and fill in their results:
1. `node -v`: v8.9.1
2. `npm -v`: 5.5.1
3. "webpack": "^4.28.4"
4. "react": "^16.9.0"
5. "react-hot-loader": "^4.12.11"
Then, specify:
1. Operating system: Windows 7
2. Browser and version: Chrome
Contributor guide
Assessment
This issue has not been assessed yet.