I'm getting an error about not having a default export-CodePudding

I'm trying to import Authprovider but i'm getting an error that it wasn't exported properly. Here is what i have so far. I've updated the firebase to version 9. So that should be good, i also checked my exports and they looked correct. I've tried using other stackoverflow examples before posting.

Compiled with problems:X

ERROR in ./src/components/App.jsx 18:30-42

export 'default' (imported as 'AuthProvider') was not found in '../components/contexts/AuthContext' (possible exports: AuthProvider, useAuth)

import "./App.css";
import Navbar from "../components/navbar/Navbar";
import { BrowserRouter as Routes, Route } from "react-router-dom";
import React from "react";
import Home from "./Home";
import Services from "./pages/Services";
import Products from "./products/Games";
import SignUp from "../components/user/SignUp";
import LogIn from "../components/user/LogIn";
import Snake from "./products/snakegame/Snake";
import AuthProvider from "../components/contexts/AuthContext";

function App() {
  return (
    <AuthProvider>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home to="/" />}></Route>
        <Route path="/services" element={<Services />}></Route>
        <Route path="/signup" element={<SignUp />}></Route>
        <Route path="/products" element={<Products />}></Route>
        <Route path="/signUp" element={<SignUp />}></Route>
        <Route path="/logIn" element={<LogIn />}></Route>
        <Route path="/snake" element={<Snake />}></Route>
      </Routes>
    </AuthProvider>
  );
}
export default App;
I added the closing AuthProvider tag here, to my app.jsx file.

This is my AuthContext.js file.I'm exporting the two functions.

import React, { useContext, useState, useEffect } from "react";
import { auth } from "../../firebase";

const AuthContext = React.createContext;

function useAuth() {
  return useContext(AuthContext);
}

function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState();

  function signUp(email, password) {
    auth.createUserWithEmailAndPassword(email, password);
  }

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setCurrentUser(user);
    });
    return unsubscribe;
  }, []);
  const value = {
    currentUser,
    signUp,
  };
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

export { useAuth, AuthProvider };

CodePudding user response：

Since you are exporting AuthProvider in an object, you will need to import it using destructuring.

// AuthContext.js

export { useAuth, AuthProvider };  <-- exported in an object.

You need to import AuthProvider using destructuring.

// App.js

import { AuthProvider } from "../components/contexts/AuthContext"; <-- update this line to import using object destructuring.

CodePudding user response：

You need to import like this...

import { AuthProvider } from "../components/contexts/AuthContext";