undefined this.props.children when getting async c

Question

I'm using react, redux and react router among others to build and example app.

I'm trying to load asynchronously different parts of my application. I've divided my app in ducks and I'm following this example https://github.com/insin/react-examples/tree/master/code-splitting-redux-reducers

I'm using:
react-router 2.0.1 webpack 1.12.13 webpack-dev-middleware 1.5.1 webpack-hot-middleware 2.6.4

My routes:

import App from './components/layouts/app'
import Home from './components/common/home'
import Login from './containers/login'
import Register from './containers/register'

export default function configureRoutes(reducerRegistry) {
  return(
    <Route component={App}>
      <Route  path='/' component={Home} />
      <Route path='/login' component={Login}/>
      <Route path='/register' component={Register}/>
      <Route path='/admin' getComponent={(location, cb) => {
        require.ensure([], require => {
          reducerRegistry.register({admin: require('./modules/admin')})
          if (process.env.NODE_ENV !== 'production') {
            if (module.hot) {
              module.hot.accept('./modules/admin', () => {
                reducerRegistry.register({admin: require('./modules/admin')})
              })
            }
          }
          cb(null, require('./containers/admin'))
        })
      }}/>
    </Route>
)}

My admin component:

import React, { PropTypes, Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { load } from '../modules/admin'


class Admin extends Component {
  componentDidMount() {
    this.props.load()  
  }
  render() {
    const { message, isFetching } = this.props
    return (
      <div>
        <p>{message}</p> 
        <p>This module was loaded via chunk </p>
        {isFetching && <p>Doing some fake loading ...</p>}
      </div>
    )  
  }  
}

Admin.propTypes = {
  message: PropTypes.string.isRequired,
  isFetching: PropTypes.bool.isRequired,
  load: PropTypes.string.isRequired
}

function mapStateToProps(state) {
  return state.admin 
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ load }, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Admin)

The problem is going to /admin, this.props.children of app component is undefined, so my component never gets rendered.

I was also able to check that the state doesn't include the admin after going to /admin.

I can see that the requested chunk is being requested and responded and it does contain the reducer and the component. But they are not being applied.

Do you have any ideas where to start looking? I'm out of them

Thanks in advance

Answer 1

I'm using ES6 modules with import and export but webpack uses ES5, commonJS modules, so the require requests answers with an object containing default and all the other properties I'm exporting from that module.

So I have to change the require('./x') requests to require('./x').default to make it work

export default function configureRoutes(reducerRegistry) {
  return(
    <Route component={App}>
      <Route  path='/' component={Home} />
      <Route path='/login' component={Login}/>
      <Route path='/register' component={Register}/>
      <Route path='/admin' getComponent={(location, cb) => {
        require.ensure([], require => {
          const reducer = require('./modules/admin').default
          const component = require('./containers/admin').default
          reducerRegistry.register({admin: reducer})
          if (process.env.NODE_ENV !== 'production') {
            if (module.hot) {
              module.hot.accept('./modules/admin', () => {
                reducerRegistry.register({admin: reducer})
              })
            }
          }
          cb(null, component)
        })
      }}/>
    </Route>
)}