Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
littlee opened this issue May 26, 2016 · 3 comments

Comments

@littlee
Copy link

littlee commented May 26, 2016

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:
qq 20160526151250

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
Copy link
Author

littlee commented May 26, 2016

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
Copy link
Contributor

dlmr commented May 26, 2016

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
Copy link
Author

littlee commented May 26, 2016

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants