TypeError: react__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function

Question

I am making a To-do app using the Context API in React. On starting the deveopment server, it throws the error :

TypeError: react__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function

I am a beginner in React and cannot find out any possible reason for this problem to occur. Here is my App.js :

import React, {useReducer} from 'react';
import Container from "reactstrap/lib/Container";
import "bootstrap/dist/css/bootstrap.min.css";
import './App.css';

import {TodoContext} from './Context/TodoContext';
import todoReducer from "./Context/reducer";

const App = () => {
  const [todo, dispatch] = useReducer(todoReducer, [])
  return(
    <TodoContext.Provider value={{todo, dispatch}}>
      <Container fluid>
        <h1>
          Todo App with Context API
        </h1>
      </Container>
    </TodoContext.Provider>
  )
}

export default App;

I am using ^16.3.1 for both react and react-dom

Solution 1

In your TodoContext.js you incorrectly imported createContext. Instead of

import createContext from 'react';

you should use

import { createContext } from 'react';

Solution 2

Import createContext with brackets so React knows you're taking the function instead of the whole thing. That way you can actually export the function out. This is where the error in your code popped up. If you didn't, then React would not think that createContext was a function.