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

Question

Reactjs Context Provider Error

I'm getting the following error

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

Here is my app.js

import React from 'react';
import ReactDOM from 'react-dom';
import { UserProvider } from "./lib/user.js"

const App = () => <UserProvider></UserProvider>

ReactDOM.render(
  <App />,
  document.getElementById("app")
);

and here is the ./lib/user.js :

import React from 'react'

export const UserContext = React.createContext({
  user: null,
  logIn: ((token, user) => {}),
  logOut: (() => {})
})

export class UserProvider extends React.Component {
  constructor(props) {
    super(props)

    this.logIn = (token, user) => {
      setToken(token)
      this.setState(state => ({user: user}))
    }

    this.logOut = (client) => {
      clearToken()
      this.setState(state => ({user: null}))
      client.resetStore()
      client.cache.reset()
    }

    this.state = {
      user: null,
      logIn: this.logIn,
      logOut: this.logOut
    }
  }

  render() {
    console.log(<div></div>)
    console.log(<UserContext.Provider/>)
    return (
      <UserContext.Provider value={this.state}>
        <p>hi</p>
      </UserContext.Provider>
    )
  }
}

This is on React 16.3.2. There are many situations where the error is due to default vs named exports, which this is not appear to be:

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

Answer 1

您可能正在使用react@16.3与之前不支持上下文的react-dom版本（例如16.2）。