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

Answer 1

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

import createContext from 'react';

you should use

import { createContext } from 'react';