React:Cannot read property 'createElement' of undefined

So this question is referencing an error that resides in the context 'it says Cannot read property ‘createElement’ of undefined,

import {React,useState, createContext, useContext, useEffect } from 'react';

import { currentUserFunc } from '../services/auth';

export const AppContext = createContext()

export const AppCtxProvider = (props)=>{

    const[user,setUser] = useState(null)

    const [userUpdate,setUsrUpdate] = useState(false)
        async function getSessionData() {
            const {data}= await currentUserFunc()


    const login = (userInf) => {

    const signup = (userInf)=> {

    const logout = () => {

    const value= {user, login,logout,signup, setUsrUpdate}

    return <AppContext.Provider {...props} value={value}/>

export const useContextInfo = () => useContext(AppContext)`

and here’s my index.js

import React  from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Router from './Router';
import * as serviceWorker from './serviceWorker';
import {AppCtxProvider} from './hooks/context'

      <Router />
 , document.getElementById('root')// </React.StrictMode>


I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

I don’t have time to write it all out, but this caught my eye:

import {React,useState, createContext, useContext, useEffect } from 'react';

Don’t you mean:

import React, { useState, createContext, useContext, useEffect } from 'react';

Holy sh&%%, it worked!,I’m angry now, could you give me some errm…context about bringing React, outside of the callout in {‘bracket’} notation, what happened. Thank you! btw,

function Example () {
  // do something

function funcExample () {
 // do something else

function anotherFuncExample () {
 // do something else

You can have one (and only one) default export per module, + as many named exports as you want:

export default Example;

export { funcExample, anotherFunctExample };

Then they can be imported: default exports without the curly braces (it’s a namespace), and named exports with:

import Example from "./my-example";

import  { funcExample, anotherFunctExample } from ./myExample


import Example, { funcExample, anotherFunctExample }  from "./my-example";
1 Like