我收到关于没有默认导出的错误答案

【问题标题】：I'm getting an error about not having a default export我收到关于没有默认导出的错误
【发布时间】：2022-11-07 05:35:58
【问题描述】：

我正在尝试导入 Authprovider，但我收到一个错误，即它没有正确导出。这是我到目前为止所拥有的。我已将 firebase 更新到第 9 版。所以这应该很好，我还检查了我的导出，它们看起来是正确的。在发布之前，我尝试过使用其他 stackoverflow 示例。

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;

我在我的 app.jsx 文件中添加了关闭 AuthProvider 标记。

这是我的 AuthContext.js 文件。我正在导出这两个函数。

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 };

【问题讨论】：

标签： javascript reactjs react-native

【解决方案1】：

Question :: export 'default' (imported as 'AuthProvider') was not found in 
           '../components/contexts/AuthContext' (possible exports: AuthProvider, 
           useAuth)
      
Answer :: The possible solution for this.
    
    Import AuthProvider by the destructuring method.
    
    import { AuthProvider } from "../components/contexts/AuthContext";

【讨论】：

【解决方案2】：

由于您在对象中导出AuthProvider，因此您需要使用解构来导入它。

// AuthContext.js

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

您需要使用解构导入 AuthProvider。

// App.js

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

【讨论】：

【解决方案3】：

你需要像这样导入......

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

【讨论】：

【解决方案4】：

如果您像这样导出为默认值

export default function AuthProvider({ children }){

...

}

或者

function AuthProvider({ children }){

...

}

export default AuthProvider

那么只有你可以像这样导入

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

否则，您必须通过像这样的解构从该导出导入对象

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

【讨论】：

【解决方案5】：

您专门导出了 AuthProvider 和 useAuth 而不是导出默认对象。我们可以通过几种方式导入它们，

import * as auth from ‘ ../components/contexts/AuthContext’;

您可以访问像 auth.AuthProvider 这样的对象

或者

import { useAuth, AuthProvider } from ‘../components/contexts/AuthContext’;

【讨论】：

【解决方案6】：

从“../components/contexts/AuthContext”导入 AuthProvider；

是错误的方法。您应该像这样使用 {Auth Provider} 。例如;

从“../components/contexts/AuthContext”导入{AuthProvider}；

【讨论】：