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:

Double checking I have 16.3.1 installed
putting context in or outside <BrowserRouter>
Tried {Context} vs Context
reinstalling NPM packages
putting in { text: 'ok' } inside of createContext()
I tried 'create-react-context' and still got the same error, maybe this is a clue? I am not sure
tried react@16.3.0-alpha.0 which works in tutorial
Some other stuff I have no forgot.

EDIT: Answer below

What are these? `` Lets see the code for them. Where do you use `Context.Consumer`? — Kyle Richardson, Apr 07 '18 at 03:23
@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? — Kevin Danikowski, Apr 07 '18 at 03:27

Omar · Accepted Answer · 2018-04-07T17:16:09.737

18

Check if you have react-dom 16.3.1

edited Apr 07 '18 at 17:16

answered Apr 07 '18 at 03:08

Omar

3,401
2
23
40

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. – Kevin Danikowski Apr 07 '18 at 03:18
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 – Omar Apr 07 '18 at 17:12
ok I upvoted, good point, but that was only after I put what it was lol – Kevin Danikowski Apr 07 '18 at 17:16
No it wasnt I put that before you check my edit time – Omar Apr 07 '18 at 17:17
1

not worth the time to look, I got it fixed that's all that matters! – Kevin Danikowski Apr 07 '18 at 17:18

score 3 · Answer 2 · answered Apr 07 '18 at 03:42

I figured it out. This is a rookie mistake, but I needed to install react-dom@16.3.* , 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.

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

2 Answers2