警告：道具类型失败：提供给“提供者”的对象类型为“对象”的道具儿童无效，需要一个ReactElement

Question

I have a problem:

Warning: Failed prop type: Invalid prop children of type object supplied to Provider , expected a single ReactElement.

I have searched for an answer for sometime now but can't resolve this. My version of react is 15.3.0.

thanks~

    import React from 'react';
    import ReactDom from 'react-dom';
    import { createStore, applyMiddleware, combineReducers } from 'redux';
    import { Provider } from 'react-redux';
    import { Router, Route, IndexRoute, hashHistory } from 'react-router';
    import { syncHistoryWithStore, routerReducer } from 'react-router-redux';
    import thunkMiddleware from 'redux-thunk';

    import reducers from './redux/reducers';
    import Entrance from './components/Entrance.jsx';
    import EntranceNone from './components/EntranceNone.jsx';
    import CreditPoints from './components/CreditPoints.jsx';
    import CreditPrivilege from './components/CreditPrivilege.jsx';
    import CreditPromote from './components/CreditPromote.jsx';

    let reduxDevTool = null;
    let combReducer = { app: reducers, routing: routerReducer };
    let store = createStore(combineReducers(combReducer), applyMiddleware(thunkMiddleware));

    const history = syncHistoryWithStore(hashHistory, store);

    ReactDom.render(
        <Provider store={store}>
            <div>
                <Router history={history}>
                    <Route path="/" component={ Entrance }></Route>
                    <Route path="/EntranceNone" component={ EntranceNone }></Route>
                    <Route path="/creditPoints" component={ CreditPoints }></Route>
                    <Route path="/privilege" component={ CreditPrivilege }></Route>
                    <Route path="/promote" component={ CreditPromote }></Route>
                </Router>
            </div>
        </Provider>,
        document.getElementById('app')
    );


require('../less/entrance.css');
import { initRootFontSize,originDomin } from '../utils';
import React,{Component} from 'react';
import classNames from 'classnames';
import 'babel-polyfill';
import cookie from 'react-cookie';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as Actions from '../redux/action';
import { hashHistory ,Link } from 'react-router';

class Entrance extends Component { 
    constructor (props) {
        super(props);
        initRootFontSize();
        this.state = {
            agree:true,
            submitFlag:false
        };
    }

    handleAgreeMent(){
        this.setState({agree:!this.state.agree});
    }

    componentDidMount(){
        if(creditData.isOpenCreditService === "0"){
            this.context.router.push('/');
        }else{
            this.context.router.push('/creditPoints');
        }
    }

    componentDidUpdate(prevProps,prevState){
        if(this.props.resCode && this.state.submitFlag){
            if(this.props.resCode == "000"){
                this.context.router.push('/creditPoints');
            }else{
                alert(this.props.resMsg);
            }
        }
    }

    handleClick(){
        if(this.state.agree){ 
            this.props.actions.fetchIsOpen();
            this.setState({submitFlag:true}); 
        }
    }

    render () {   
        return(
            <div className="wrap">
                <div className="credit-img"></div>
                <div className="credit-cont">
                    <p className="credit-cont-up">xxx</p>
                    <p className="credit-cont-down">xxx</p>
                </div>
                <div className="credit-agree"><span className={classNames({icon: true, iconSelected: this.state.agree})} onClick={this.handleAgreeMent.bind(this)}></span><span className="credit-agree-cont">xx<a href={originDomin()+'static.pay.xiaomi.com/mi-credit-points/src/html/agreeMent.html'} className="credit-agree-detail">xxx</a></span></div>
                <div className={classNames({button: true,bottonFalse:this.state.agree,submitFlag:this.state.submitFlag})}  onClick={this.handleClick.bind(this)}>{this.state.submitFlag?'x':'xx'}</div>
            </div>
        );
    }

}

function mapStateToProps(state) {
    return {
        resCode: state.app.resCode,
        resMsg: state.app.resMsg,
        dataList: state.app.dataList
    };
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators(Actions, dispatch),
    };
}

Entrance.contextTypes = {
    router: React.PropTypes.object
};

export default connect(mapStateToProps, mapDispatchToProps)(Entrance);

Answer 1

I'm going to make a few assertions, because there are so few details, but this error happens in a very specific situation which is explained later in detail. Specifically it happens if either React or ReactDOM (but not both) is imported before babel-polyfill. If both are imported before, that's fine. If both are imported after, that's also fine. Now, the assertion of my answer is that you're using react-hot-loader/patch as your first entry point, instead of babel-polyfill .

Babel-polyfill documentation clearly states on their front page no less :

To include the polyfill you need to require it at the top of the entry point to your application.

Make sure it is called before all other code/require statements!

While you can work around this requirement, you have to be careful if doing so. So the simplest solution to your issue, presuming webpack, is to have your entry point configuration as follows

entry: {
    'babel-polyfill',
    'react-hot-loader/patch',
    ...
}

This is not the only solution, read the full explanation below to see how to avoid this issue if adding an entry point is not an option (for example due to desire to reduce entry point chunk size)

Technical explanation

react-hot-loader/patch in patch.dev.js imports React . Because babel-polyfill is not yet loaded and Symbol is not yet available on certain browsers, React sets its REACT_ELEMENT_TYPE constant to numeric form instead of Symbol . ReactDOM will do this same constant definition for itself independently of React. However if babel-polyfill is now imported before ReactDOM, Symbol is now available when ReactDOM is imported and therefore the constant for ReactDOM gets defined in the Symbol form rather than numeric form. Therefore your React and ReactDOM have a different REACT_ELEMENT_TYPE and ReactDOM is unable to distinguish React Components from other objects.