类型错误：_Home_Components_Home__WEBPACK_IMPORTED_MODULE_2__.default.auth 不是 function

Question

免责声明我是一个完整的初学者反应，我正在尝试在我的应用程序中实现路由，该应用程序基于 webstorm IDE。当用户注册或登录时，应重定向到主页。但是当我运行 npm 开始时，我得到以下信息错误。

   TypeError:     _Home_Components_Home__WEBPACK_IMPORTED_MODULE_2__.default.auth is not a function

我从 stackoverflow 上的其他帖子中看到的所有解决方案都没有帮助

这是我的 Auth.js 文件

import React, { useEffect, useState } from "react";
import app from "../../Home/Components/Home";
import 'firebase/auth';

import 'firebase/app';
import 'firebase/firestore'
import 'firebase/auth';

export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState(null);

useEffect(() => {
    app.auth().onAuthStateChanged(setCurrentUser);
}, []);

return (
    <AuthContext.Provider
        value={{
            currentUser
        }}
    >
        {children}
    </AuthContext.Provider>
);
};

这是我的 Home.js 文件，它是主页，即登录/注册后显示的页面

import React, { Component } from 'react';
import '../../App.css';
import '../../index.js';


 //import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
    //import '/home/dennis/WebstormProjects/studentsdiscussionforum       /node_modules/bootstrap/dist/css/bootstrap.min.css'
    import '/home/dennis/WebstormProjects/studentsdiscussionforum/node_modules/bootstrap/dist/js/bootstrap.min.js'
    //import '../node_modules/bootstrap/dist/js/bootstrap.min.js';
    import Threads from "../../Threads/Components/Threads";
    import firebase from "firebase/app";
    import 'firebase/database';
    import 'firebase/auth';
    import 'firebase/firestore'

    class Home extends Component {
    constructor(props) {
        super(props);

        const config = {



        };

        this.app = firebase.initializeApp(config);
        this.database = this.app.database();

    }
    render() {
        return (
            <Threads database={this.app.database}/>
        );
    }

    }
    export default Home;

这是我的 app.js 文件

import React, { Component } from 'react';
import Home from "./Home/Components/Home";
import Login from "./Login/Components/Login.js"
import SignUp from "./SignUp/Components/Signup.js"
import { BrowserRouter as Router, Route } from 'react-router-dom'
import {AuthProvider} from "./Auth/Components/Auth";
import PrivateRoute from "./PrivateRoute/Components/PrivateRoute";


class App extends Component { 
constructor(props) {
    super(props);

}
render() {
    return (
        //<Home/>
        <AuthProvider>
        <Router>
        <div>
            <PrivateRoute exact path="/" component={Home} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/signup" component={SignUp} />
        </div>
        </Router>
        </AuthProvider>
    );
}
}
export default App;