Adrian Sol Adrian Sol -4 years ago 76
React JSX Question

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

The

PlainRoute
Router logic works perfectly fine when implemented in described way as above:

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


But 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 followin.

enter image description here

Answer Source

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))
  }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download