Webpack does not generate chunks according to the split points using require.ensure

[jasan-s]

is there something wrong in my routes file:

import React from 'react'
import { Router, Route, IndexRoute } from 'react-router'
import { MainContainer, HomeContainer } from 'containers'
export default function getRoutes (checkAuth, history, errorAuth) {
  return (
      <Router history={history}>
        <Route path='/' component={MainContainer}>
          <Route path= 'auth' getComponent={(nextState, callback) => {
            require.ensure([], (require) => {
              callback(null, require('containers/Authenticate/AuthenticateContainer.js').default)
            })
          }}/>
          <Route path= 'addEvent' getComponent={(nextState, callback) => {
            require.ensure([], (require) => {
              callback(null, require('containers/CreateEventForm/CreateEventFormContainer.js').default)
            })
          }}/>
          <Route path= 'addPrize' getComponent={(nextState, callback) => {
            require.ensure([], (require) => {
              callback(null, require('containers/CreatePrizeForm/CreatePrizeFormContainer.js').default)
            })
          }}/>
          <Route path= 'eventsFeed' getComponent={(nextState, callback) => {
            require.ensure([], (require) => {
              callback(null, require('containers/EventsFeed/EventsFeedContainer.js').default)
            })
          }}/>
          <Route path= 'prizesFeed' getComponent={(nextState, callback) => {
            require.ensure([], (require) => {
              callback(null, require('containers/PrizesFeed/PrizesFeedContainer.js').default)
            })
          }}/>
          <Route path= 'howItWorks' getComponent={(nextState, callback) => {
            require.ensure([], (require) => {
              callback(null, require('components/HowItWorks/HowItWorks.js').default)
            })
          }}/>
          <Route path= 'confirmEvent' getComponent={(nextState, callback) => {
            require.ensure([], (require) => {
              callback(null, require('containers/EventAndPrizeConfirm/EventAndPrizeConfirmContainer.js').default)
            })
          }}/>
          <Route path= 'eventPreview/:eventId' getComponent={(nextState, callback) => {
            require.ensure([], (require) => {
              callback(null, require('containers/EventPreview/EventPreviewContainer.js').default)
            })
          }}/>
          <Route path= 'editEvent/:eventId' getComponent={(nextState, callback) => {
            require.ensure([], (require) => {
              callback(null, require('containers/EditEventForm/EditEventFormContainer.js').default)
            })
          }}/>
          <Route path= 'editPrize/:prizeId' getComponent={(nextState, callback) => {
            require.ensure([], (require) => {
              callback(null, require('containers/EditPrizeForm/EditPrizeFormContainer.js').default)
            })
          }}/>
          <Route path= '*' getComponent={(nextState, callback) => {
            require.ensure([], (require) => {
              callback(null, require('components/Error404/Error404.js').default)
            })
          }}/>
        <IndexRoute component = {HomeContainer} />
        </Route>
      </Router>
  )
}```

[bebraw]

Can you check the official react-router example and compare against that?

[jasan-s]

Yes, i have. The example imports multiple routes into one file and uses childRoutes to add them. whereas my routes are all defined in one routes file. But the syntax appears to be the same. I just don't get the generated chunks.

[bebraw]

whereas my routes are all defined in one routes file.

Maybe that's the key here? Could you try the same idea as the official example? Just a single route would be enough. If that works, then we have something to proceed with.

[jasan-s]

thanks, tried that but nothing. I posted on stack overflow hopefully it gets solved.

[bebraw]

Ok, another direction. Pick up the working example and move from that towards your solution. If that works, then it could be something on the configuration level. At least then you have something to compare.

[bebraw]

Time to close. Please note that webpack 2 provides import(...).then kind of syntax. The current version of the book has the setup if you are interested.