partial-app-loading for an isomorphic app

Looking at the partial-app-loading example, it seems it will work only for client side:

var PreDashboard = React.createClass({
  mixins: [ AsyncElement ],
  bundle: require('bundle?lazy!./dashboard.js'),
  preRender: function () {
    return <div>Loading dashboard...</div>;
  }
});

In an isomorphic environment, I get the following error when I run it Server side:

Error: Cannot find module 'bundle?lazy!./dashboard.js'

It seems that bundle-loader doesn’t recognize the module server side.

[anatomic]

Ok, so I’d advise you switch to using require.ensure on the client side and a synchronous polyfill on the server.

Something like:

if( typeof require.ensure !== "function") {
    require.ensure = function(deps, callback) {
        callback(require);
    }
}

Your code would then also need changing from require('bundle?lazy'... to something more like:

var PreDashboard = React.createClass({
  mixins: [ AsyncElement ],
  bundle: function(cb) {
      require.ensure([], function(require) {
          cb(require('./dashboard.js'));
      });
  },
  preRender: function () {
    return <div>Loading dashboard...</div>;
  }
});

// Or using ES6 fat arrow functions

var PreDashboard = React.createClass({
  mixins: [ AsyncElement ],
  bundle: (cb) => {
      require.ensure([], (require) => {
          cb(require('./dashboard.js'));
      });
  },
  preRender: function () {
    return <div>Loading dashboard...</div>;
  }
});

This will still use the load function from AsyncElement and should replicate the functionality you had previously with the bundle-loader. Let me know if it works!

[ryanflorence]

you just shim require.ensure in node-land to be synchronous and then it can work. I haven’t done it yet, but there will eventually be a demo.