React-Redux error Invalid prop `children` of type `object` supplied to `Provider`

Question

I am very much stumbling my way through learning how Redux works. I'm currently getting the following errors:

Warning: Failed propType: Invalid prop `children` of type `object` supplied to `Provider`, expected `function` 
Uncaught TypeError: children is not a function

My code is below -- is anyone able to spot why I'm getting this error?

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { Provider, connect } from 'react-redux';
import * as reducers from '../reducers/index';
import SassMeter from '../components/SassMeter';
import * as SassActions from '../actions/SassActions';
import _ from 'lodash'

const reducer = combineReducers(reducers);
const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <SassMeter />
  </Provider>,
  document.getElementById('root')
)

From what I understand, it's complaining that I'm passing an invalid prop to Provider, but all the examples I've seen follow the pattern I've followed there -- create the store using createStore(), then pass it in as props to the Provider, which wraps your root element. I feel like maybe I'm missing something to do with connect but I'm not sure what.

All help much appreciated!

Answer 1

You should most likely upgrade your version of react-redux and/or react.

In React < 0.14 and react-redux < 1.0.0, the Provider component only accepted a function as the children prop. This was a workaround to owner-based context propagation, which was deprecated in favor of parent-based context propagation in React 0.14. See the corresponding doc on the react-redux 1.0.0 README.