Server rendering dynamic routes (require.ensure) produces client React warning

[jorge-pascual]

Hi!

I'm using react-router v1.0.0-beta3 in a server rendering project with Fluxible. All is running really well now... but dynamic routes.

I have this route configuration

// Polyfill
if(typeof require.ensure !== "function") require.ensure = function(d, c) { c(require) };

var routes = {
 (...)
  path: 'search',
  component: Content,
  childRoutes: [
  {
      path: 'invoice',
      getChildRoutes (state, cb) {
            require.ensure([], (require) => {
              cb(null, [
                require('./modules/invoiceCreate')
              ])
            })
      }             
  }
(...)             

Where ./modules/invoiceCreate is

// Polyfill
if(typeof require.ensure !== "function") require.ensure = function(d, c) { c(require) };

export default {
  path: 'create',

  getComponents (cb) {
    require.ensure([], (require) => {
      cb(null, require('./views/home'))
    })
  }
}

All is working fine and I get the page composition that I expect... however, React in the client says...

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) <noscript data-reacti
 (server) <div data-reactid=".t

If I use a static route, it works fine and React doesn't say anything...

Do anyone know if the router dynamic load has any issue with server-rendering?

Regards.

[AndrewIngram]

I'm getting this too, using the same polyfill in fact.

[anatomic]

Hi, @jorge-pascual and @AndrewIngram Have a look at #1402 (comment) and see if this solves your problem

[AndrewIngram]

Yup, that does the trick, thanks for the help!

[jorge-pascual]

thank you @anatomic. After few tries, I can't catch the point...

I think my client code is very close to yours (mine over Fluxible and yours over Redux)... however, the warning is still here... and React trigger the render again...

var history = new BrowserHistory();

if (typeof history.setup === "function") {
    history.setup();
}

var dehydratedState = window.App;
window.React = React;

app.rehydrate(dehydratedState, function (err, context) {
    if (err) {
        throw err;
    }
    window.context = context;
    var routes = app.getComponent();

    Router.run(routes, history, (err, initialState, transition) => {

        React.render(
            React.createElement(
                FluxibleComponent,
                { context: context.getComponentContext() },
                <Router children={routes}  history={history} />
            ),
            document.getElementById('app'),
            function () {
                debug('React Rendered');
            }
        );

    });

});