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

Sorrows

What line of code is throwing the error. – Snorkel

It throws at ReactDOM.render(... – Sorrows

What are these? <ApolloProvider client={client}> Lets see the code for them. Where do you use Context.Consumer? – Snorkel

@KyleRichardson added, and I didn't put Context.Consumer anywhere I tried to and it didn't appear to fix the problem, I figured that if Provider doesn't work, Consumer won't either, is this wrong to think? – Sorrows

@KyleRichardson I figured it out, I didn't update react-dom – Sorrows

Answer 1

Check if you have react-dom 16.3.1

Destructionist

I actually did try that and it didn't work, not that I downvoted you, but I think it happened because that isn't how context is supposed to work. – Sorrows

I gave you the answer atleast upvote me to counteract the downvote this had the answer to check reactdom 16.3.1, removed the other part of the answer since it was not the problem not to confuse future readers – Destructionist

ok I upvoted, good point, but that was only after I put what it was lol – Sorrows

No it wasnt I put that before you check my edit time – Destructionist

not worth the time to look, I got it fixed that's all that matters! – Sorrows

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.

Sorrows