CODEWITHSUNDEEP
reactjswebpackreact-router
volna
volna

Reputation: 2610

Webpack code splitting, System.import route not found if imported from separate file

The PlainRoute Router logic works perfectly when implemented as follows ...

const componentRoutes = {
  component   : Home,
  path        : '/',
  indexRoute  : Index,
  childRoutes : [
    {
      path: 'child',
      getComponent(location, cb) {
        System.import('./Child/components/child')
          .then(module => cb(null, module.default))
      }
    }
  ]
}

However when I try to declare in a separated file

Child/index.js

export default () => ({
  path: 'child',
  getComponent(location, cb) {
    System.import('./components/child')
      .then(module => cb(null, module.default))
  }
})

And do:

import Child from './Child'

const componentRoutes = {
  component   : Home,
  path        : '/',
  indexRoute  : Index,
  childRoutes : [
    Child
  ]
}

it no longer finds the child route.

HashHistory is used as a history for the Router. And project structure is the following:

enter image description here

Upvotes: 2

Views: 98

Answers (1)

Michael Jungo
Michael Jungo

Reputation: 32972

In your Child/index.js you export a function, but then you pass in that function to the childRoutes. What you really want is the object that is returned from that function. Just call the function Child():

childRoutes : [
  Child()
]

Or you can export the object directly without wrapping it in a function in Child/index.js:

export default {
  path: 'child',
  getComponent(location, cb) {
    System.import('./components/child')
     .then(module => cb(null, module.default))
  }
}

Upvotes: 3

Related Questions