reactjsreact-context

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


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 react@16.3.0-alpha.0 which works in tutorial

  8. Some other stuff I have no forgot.

EDIT: Answer below


Solution

  • Check if you have react-dom 16.3.1