Context Components in React 16.3 are invalid

Question

I'm trying to use the new Context components in React 16.3.1. I'm running a pretty straightforward example:

const TestContext = React.createContext();

export default class Test extends Component {
  render () {
    return (
      <TestContext.Provider value="abc">
        <TestContext.Consumer>
          {value => (
            <div>{value}</div>
          )}
        </TestContext.Consumer>
      </TestContext.Provider>
    );
  }
}

However the code won't render, instead producing this error:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

It seems that both the Provider and Consumer components aren't valid components and can't be rendered by React.

Am I missing something here?

Answer 1

Figured it out!

I updated React to 16.3.1, but didn't update ReactDOM.

Running npm uninstall -s react-dom && npm i -s react-dom updated it to 16.3.1 and fixed the issue.

Side note, I wouldn't have expected the new Context API to be dependent on ReactDOM.