React 16.3.* context Provider Err: Expected string or class/func but got: Object

Question

Edit: Answer Below

I've followed both of these tutorials on youtube (currently there aren't too many) but none of them work for me, it sends me this error from the Provider in the index.js:

Tutorial 1: video and code

Tutorial 2: video and code

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

My code Context.js file:

import React from 'react'
export const Context = React.createContext();

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloProvider } from 'react-apollo';

import { Context } from './Context'

const client = new ApolloClient({
    link: new HttpLink({ uri: process.env.API_URL }),
    cache: new InMemoryCache()
})

ReactDOM.render(
    <Context.Provider value={{text: 'ok'}}>
        <BrowserRouter>
                <ApolloProvider client={client}>
                    <App />
                </ApolloProvider>
        </BrowserRouter>
    </Context.Provider>
    , document.getElementById('root'));
registerServiceWorker();

I tried/checked:

1. Double checking I have 16.3.1 installed

2. putting context in or outside <BrowserRouter>

3. Tried {Context} vs Context

4. reinstalling NPM packages

5. putting in { text: 'ok' } inside of createContext()

6. I tried 'create-react-context' and still got the same error, maybe this is a clue? I am not sure

7. tried [email protected] which works in tutorial

8. Some other stuff I have no forgot.

EDIT: Answer below

Answer 1

Check if you have react-dom 16.3.1

Answer 2

I figured it out. This is a rookie mistake, but I needed to install [email protected].* , installing react 16.3.* is not sufficient. If anyone else has the error message:

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

This may be why - You have a package that isn't fully updated.