6

I'm trying to set up code splitting / 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 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?

BTW I'm using hash history in this project - could this be the culprit?

Update:

Also tried the bundle-loader as in this answer. Same result.

Community
  • 1
  • 1
Dmitry Shvedov
  • 3,169
  • 4
  • 39
  • 51
  • Thanks for tag suggestion. The docs do mention that there is a third optional argument, which is the chunk name. It is not ignored, the filename for the chunk is attendee.js - webpack does use it. You can use it supposedly to get a few routes to get bundled into the same named chunk. – Dmitry Shvedov May 02 '16 at 18:35
  • Tried removing the third parameter - no change except for the name of the chunk file - now 2.js. – Dmitry Shvedov May 02 '16 at 19:01
  • I'm sorry I don't have any other advice for resolving your issue. – Patrick Roberts May 02 '16 at 19:19

1 Answers1

0

you are almost there! Try this: you need to specific the array of module dependencies ahead of time in the first argument of require.ensure instead of [] explicitly set it to ['attendee/containers/Profile']

(location, cb) => {
  require.ensure(['attendee/containers/Profile'], (require) => {
    cb(null, require('attendee/containers/Profile').default) 
  }) 
}
Sitian Liu
  • 1,156
  • 10
  • 14