Error: Element type is invalid

JavaScript
1

after including
import { AuthContext } from './shared/context/auth-context';
in app.js
I’m getting this error

image
image1366×768 120 KB

Auth-context code

import {createContext} from 'react'

export const AuthContext = createContext({
    isLoggedIn:false,
    login:()=>{},
    logout:()=>{}
});
2

We would need to see the content of the App.js component. It can be caused by a number of things. The error message gives you two possible suggestions.

Without more of the code, it’s hard to say anything. But it does seem a bit unlikely that the specific error is just from importing the context, surely you made other changes to the code. Like using the context in App for example?

3

when I dont import and comment the context code it works fine

4

App.js code

import './App.css';
import React,{useState,useCallback} from 'react';
import {
  BrowserRouter as Router,
  Route,
  Redirect,
  Switch
} from 'react-router-dom';

import Navbar from './shared/components/navigation/Navbar';
import Event from './events/pages/Event'
import Details from './events/pages/Details';
import MakeEvents from './manage event/pages/ManageEvents';
import PlanEvent from './manage event/components/PlanEvent';
import Login from './shared/components/login/pages/Login';
import Auth from './user/pages/Auth';
import { AuthContext } from './shared/context/auth-context';


function App() {
  const [isLoggedIn,setLoggedIn] = useState(false);
  
  const login = useCallback(()=>{
    setLoggedIn(true);

  },[]);

  const logout = useCallback(()=>{
    setLoggedIn(false);

  },[]);

  return (
    <AuthContext.provider value={{isLoggedIn:isLoggedIn,login:login,logout:logout}}>

      <Router>
      <main>
        <Switch>

          <Route path='/' exact>
           <Event/>
          </Route>

          <Route path="/:eventId/events" exact>
            <Details/>
          </Route>

          <Route path="/test" exact>
            <Details/>
          </Route>

          <Route path="/manageevent/" >
           <MakeEvents/>
          </Route>
          
          <Route path="/auth" >
            {/* <Login/> */}
            <Auth/>
          </Route>

          <Redirect to="/"/>
        </Switch>
      </main>
      </Router>
    </AuthContext.provider>
  );
}

export default App;
5

Maybe one of the components that are consuming the context is the issue. What happens if you comment out <Auth />.

This error is usually from an incorrect import/export or some invalid return value from a component.

If you have a GitHub repo you can link to that would help.

6

commented Auth but no change,
the repo is private :disappointed_relieved:

7

works well when I comment

<AuthContext.provider>
8

What other components are consuming the context?

Check their (likely conditional) return is valid and double-check your import/export (e.g. no named exports for the components/pages).

At this point, everything is just speculation, which can go on forever. Without the code, we really have no way of knowing what is wrong.

Not sure if your code is based on this article, but it sure does look similar.

1 Like
9

I think it should be AuthContext.Provider (with captal P).

2 Likes
10

^ Good catch.

I’m actually a bit surprised no other error is provided in this case. Not even the linter is complaining as far as I can tell. I guess that’s what I get for not (rarely) using context.

1 Like
12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.