Setting up code splitting in Webpack and React Router

[dmt0]

I've gone through all parts of the documentation and went through a whole bunch of tutorials all over the web, but I'm still missing something.

I'm trying to set up chunking in my app by route, using require.ensure. So here's my route:

<Route path="profile" 
       getComponent={(location, cb) => 
         {require.ensure(
            [], 
            (require) => { cb(null, require('attendee/containers/Profile/').default) }, 
            'attendee')}} />

Here are relevant lines from my webpack config:

const PATHS = {
  app: path.join(__dirname, '../src'),
  build: path.join(__dirname, '../dist'),
};

const common = {
  entry: [
    PATHS.app,
  ],

  output: {
    path: PATHS.build,
    publicPath: PATHS.build + '/',
    filename: '[name].js',
    chunkFilename: '[name].js',
    sourceMapFilename: '[name].js.map'
  },

  target: 'web',

devtool: 'cheap-module-eval-source-map',
entry: [
  'bootstrap-loader',
  'webpack-hot-middleware/client',
  './src/index',
],
output: {
  publicPath: '/dist/',
},

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: '"development"',
    },
    __DEVELOPMENT__: true,
  }),
  new ExtractTextPlugin('main.css'),
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoErrorsPlugin(),
  new webpack.ProvidePlugin({
    jQuery: 'jquery',
  }),
],

When I navigate to the page in the route, I see in the logs that the required chunk does get downloaded. The page however does not load.

And I see the following stack trace in the browser console:

Uncaught TypeError: Cannot read property 'call' of undefined
t                     @ main.js:10
(anonymous function)  @ main.js:44637
window.webpackJsonp   @ main.js:40
(anonymous function)  @ attendee.js:1

The line it complains about is this:

return e[n].call(o.exports, o, o.exports, t)

The second line ((anonymous function) @ main.js:44637) is essentially this:

require('attendee/containers/Profile/').default

Note, if I do console.log(require('./attendee/containers/Profile/').default), I get a function as an output, so I'm not sure why it is undefined. And of course when I do that the code works, but than there's no chunking any more.

So I'm doing something wrong with the require. Any idea what it is? Thanks

I asked the same question on SO with no results: http://stackoverflow.com/questions/36988975/setting-up-code-splitting-in-webpack-and-react-js

[janvennemann]

If you are comfortable with using Webpack 2 Beta you can try System.import() instead of require.ensure() to setup code splitting. Your route definition could look something like this:

import Site from './containers/Site'

function errorLoading(err) {
  console.error('Dynamic page loading failed', err);
}

return {
  component: Site,
  childRoutes: [
    {
      path: 'profile',
      getComponent: (location, cb) => {
        System.import('./attendee/containers/Profile')
          .then(function(m) {
            cb(null, m.default)
          })
          .catch(errorLoading);
      }
    }
  ]
}

Also take a look at this Tutorial, which pushed me into the right direction when setting up code splitting. Keep in mind that this will only work on the client side out of the box. For the time being i use another route file with the exact same routes using static imports on the server.

[dmt0]

Thanks for the hint. Yes I did see the tutorial before, but I don't think I would want to use Webpack 2 in production until it hits at least 2.0.1.

I was hoping that someone would point out some config that I missed that makes the whole thing not work. Here are some of my suspects:

• I use hashHistory
• I use ES6 modules everywhere throughout the app

[mantou132]

I have the same problem；
And can not be 100% reproduction
I use browserHistory

[webpack-bot]

This issue had no activity for at least half a year.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[webpack-bot]

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.