Warning: React.createElement: type should not be null, undefined, boolean, or number.

[littlee]

I am trying async-props with my project

app.js

var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var browserHistory = require('react-router').browserHistory;
var AsyncProps = require('async-props');

var rootRoute = {
    component: 'div',
    childRoutes: [{
        path: '/',
        component: require('./components/App.js'),
        indexRoute: {
            component: require('./components/Home.js')
        },
        childRoutes: [
            require('./routes/Page.js'),
            {
                path: '*',
                component: require('./components/NotFound.js')
            }
        ]
    }]
};

ReactDOM.render(
    <Router history={browserHistory} routes={rootRoute} render={(props) => (
        <AsyncProps {...props} renderLoading={() => <div>Loading...</div>}/>
    )}/>,
    document.getElementById('app')
);

but is always get this error:

if I remove render prop in Router, the error will gone:

ReactDOM.render(
    <Router history={browserHistory} routes={rootRoute}/>,
    document.getElementById('app')
);

package.json

...
    "async-props": "^0.3.2",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-router": "^2.4.1",
...

[littlee]

after I change the syntax to es6, it works, but do I have to use es6?

import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory } from 'react-router';
import AsyncProps from 'async-props';

const rootRoute = {
    component: 'div',
    childRoutes: [{
        path: '/',
        component: require('./components/App.js'),
        indexRoute: {
            component: require('./components/Home.js')
        },
        childRoutes: [
            require('./routes/Page.js'),
            {
                path: '*',
                component: require('./components/NotFound.js')
            }
        ]
    }]
};

render(
    <Router history={browserHistory} routes={rootRoute} render={(props) => <AsyncProps {...props} renderLoading={() => <div>Loading...</div>} />} />,
    document.getElementById('app')
    );

[dlmr]

I think you get this error because of the way that Babel transpils the code. Try this when using ES5: var AsyncProps = require('async-props').default;

[littlee]

Thanks