Hot relaod with isomorphic-relay-router@0.8.1

[abhishiv]

Hi @denvned

I'm looking for an example of making hot reload work with isomorphic-relay-router, and have been following the code in this repo as a guide. However I can't make hot reload work with isomorphic-relay-router@0.8.1.

It seems the problem is that right now int the boilerplate uses IsomorphicRouter.Router

https://github.com/denvned/isomorphic-relay-boilerplate/blob/5dd32f3c5759b9305dc1c731bbf80671824978fc/frontend/src/app.js#L19

    <IsomorphicRouter.Router routes={routes} history={history} />,

However with isomorphic-relay-router@0.8.1, it seems IsomorphicRouter.Router is deprecated and we have to use IsomorphicRouter.prepareInitialRender

match({ routes, history: browserHistory }, (error, redirectLocation, renderProps) => {
  IsomorphicRouter.prepareInitialRender(environment, renderProps).then(props => {
    ReactDOM.render(<Router {...props} />, rootElement);
  });
});

https://github.com/denvned/isomorphic-relay-router/blob/master/examples/todo/src/client.js#L19

The problem is thaat now hot reloading is broken. I do get log messages in console, however the app does't reload.

[HMR] connected
client.js:127 [HMR] bundle rebuilding
client.js:130 [HMR] bundle rebuilt in 2154ms
process-update.js:27 [HMR] Checking for updates on the server...
process-update.js:100 [HMR] Updated modules:
process-update.js:102 [HMR]  - ./packages/hub/components/nav.js
process-update.js:102 [HMR]  - ./packages/hub/components/stage.js
process-update.js:102 [HMR]  - ./packages/hub/components/routes.js
process-update.js:107 [HMR] App is up to date.

Any ideas?

[abhishiv]

I played around a bit, and after some permutations started getting Warning: You cannot change <Router routes>; it will be ignored error.

Wrapping Router in a parent component fixed that and made hot reloading work again.

class App extends  React.Component {
  render() {
    return this.props.children;
  }
}

match({ routes, history: browserHistory }, (error, redirectLocation, renderProps) => {
  IsomorphicRouter.prepareInitialRender(environment, renderProps).then(props => {
    render(<App><Router key={counter} {...props} /></App>, $el);
  });
});

In case anyone else gets stuck

[tizmagik]

@abhishiv I'm having a similar issue except hot-reloading will only work once (the first time) but then stop working from then on. Could you share your entire client index or at least the module.hot portion of it? Thanks!

[AlexGilleran]

@tizmagik mine looks like so:

class App extends React.Component {
  render() {
    return this.props.children;
  }
}

// use the same routes object as on the server
function render() {
  const routes = require('../routes').default;

  match({routes, history: browserHistory}, (error, redirectLocation, renderProps) => {
    isoRelayRouter.prepareInitialRender(environment, renderProps).then(props => {
      const newProps = {render: applyRouterMiddleware(isoRelayRouter.useIsoRelay), ...props};

      ReactDOM.render(
        <App>
          <Router {...newProps} />
        </App>
        , rootElement);

    });
  });
}

render();

if (module.hot) {
  module.hot.accept('../routes', () => {
    setTimeout(() => {
      ReactDOM.unmountComponentAtNode(rootElement);
      render();
    });
  });
}