Not working with React Router about react-transform-hmr HOT 9 CLOSED

Thanks for reporting. Any idea why this happens?

from react-transform-hmr.

I'm not entirely sure. I noticed you talking about 'router.replaceRoutes' in the past. That has been removed and I'm not sure how the router handles new props. I started to think that the router was setting routes in state and not updating when it received new props. I'm still suspicious to this but then why does adding or removing a sibling make it suddenly work?

from react-transform-hmr.

Not working with Redux-Form too actually,

As long as there are high-order component decorators, react-proxy could not catch them and therefore the hot reload would fail.

e.g.
The code
@reduxForm() class MyComponent {...}
The tree is rendered as:
ReduxFormConnector --> ReduxForm --> MyComponent.

ReduxFormConnector and MyComponent are recognized and proxied by react-proxy. So far so good. However ReduxForm will not. So when there is a new module, a new ReduxForm is rendered. Because the type is different from the old one, the old ReduxForm instance is unmounted (so is MyComponent) and then the new ReduxForm instance is mounted. Therefore the state in MyComponent lost.

Any idea how to solve this problem? My current work around is to make sure ReduxFormConnector is not proxied. So I ignore any changes in ReduxFormConnector, but any changes in MyComponent will still be hot reloaded.

from react-transform-hmr.

Just executing the module again should not affect the parent component anyway. Yes, it's not recognised, but for this reason it is just ignored, and only child component (your class) is actually updated. Is this not what happens?

from react-transform-hmr.

For babel@5, only child component is proxied (which should be good). However for babel@6 with transform-decorators-legacy, the root component is proxied (and in this case it doesn't work)

from react-transform-hmr.

The work around is instead of writing:

   @reduxForm()
   export default class MyComponent {...}

I need to write:

    class MyComponent {...}

    @reduxForm()
    export default class extends MyComponent

from react-transform-hmr.

Oh okay. That's a Babel 6 plugin order issue I guess. The transform runs before the decorator transform. I think it will be fixed in Babel 7 by grouping plugin passes by preset. Don't rely on experimental language features :-)

from react-transform-hmr.

The new Babel 6.5.0 passPerPreset option might help here.

from react-transform-hmr.

I don’t see anything actionable for us here so closing. When <Router> learns to reload its routes in componentWillReceiveProps it will probably work again.

The Redux Form issue later in comments is completely unrelated to this issue and has to do with decorator usage. Don’t use decorators, they are far from being stable, and are too easy to break in Babel 6 because of plugin ordering issues.

from react-transform-hmr.