React HMR Problem.

[zenato]

I modified React component(ex. shared/Home.jsx). But, don't re-render component.

Maybe, Example has react hot module replacement setting problem. Help, please.

[Dattaya]

I wonder what's causing the problem, because this setup works fine for me. Did you run the app with npm run dev? What do you see in the terminal, does it say webpack building..., webpack built ... but nothing happens in the browser?

[zenato]

I did run the app with npm run dev.

Case-1

modified shared/component/index.jsx. <h1>Todos</h1> to <h1>Todos-test</h1>

Chrome browser developer console:

[HMR] Updated modules:
[HMR]  - ./shared/components/index.jsx
[HMR] App is up to date.

But nothing happens in the browser.

Case-2

modified shared/component/Home.jsx. <div id="todo-list"> to <div id="todo-list"> test-text

This case works fine. (Re-render component with test-text comment)

Chrome browser developer console:

[HMR] Updated modules:
[HMR]  - ./shared/components/Home.jsx
[HMR] App is up to date.

What is different two cases.?

[Dattaya]

@zenato, does it help if you comment out this code from index.jsx and run the app in dev mode again:

  componentDidMount = () => {    
    this.props.history.pushState(null, '/home');
  }

?

[zenato]

@Dattaya, Thank you. Can't React HMR re-render parent component? Only current state component?

[Dattaya]

I don't know what exactly is going on there but in this situation pushState doesn't make much sense anyway, it's better to make the Home component an IndexRoute, see this PR #25

[zenato]

@Dattaya,Thank you for your quick reply ^__^