./node_modules/firebase/index.js 错误：ENOENT：没有这样的文件或目录

Question

I have got an error with the firebase module for some reason it's no picking it up. This is my file structure on VS code:

These are the 2 files where I need to import auth from firebase:

Login.js

import React, {useState} from 'react';
import "./Login.css";
import {Link, useHistory} from "react-router-dom";
import { auth } from "../firebase"

function Login() {
    const history = useHistory()

    const [email,setEmail] = useState("");
    const [password,setPassword] = useState("")

    const login = (e) => {
        e.preventDefault();
        auth
        .signInWithEmailAndPassword(email,password)
        .then((auth) =>{
            history.push('/');
        })
        .catch(e=>alert(e.message))
    }
    const register = (e) => {
        e.preventDefault();
        auth
        .createUserInWithEmailAndPassword(email,password)
        .then((auth) => {
            history.push('/');
        })
        .catch(e=>alert(e.message))
        
    }
    return (
        <div className="login">
            <Link to="/">
                <img className="login__logo"
                src="http://pngimg.com/uploads/amazon/amazon_PNG24.png"
                alt=""
                />
            </Link>

            <div className = "login__container">
                <h1>Sign in </h1>
                <form>
                <h5>Email</h5>
                <input value={email} onChange = {event => setEmail(event.target.value)} type="email"/>
                <h5>Password</h5>
                <input value={password} onChange = {event => setPassword(event.target.value)}  type="password"/>
                <button onClick = {login} type="submit" className = "login__signInButton"> Sign in</button>
                </form>        

                <p>                         
                    By signing-in you agree to Amazon's Conditions of Use & Sale. Please see our Privacy Notice, our Cookies Notice and our Interest-Based Ads Notice
                </p>
                <button onClick = {register} className="login__registerButton">Create your Amazon Account</button>    
            </div>
        </div>
    )
}

export default Login

App.js

import React, {useEffect} from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import "./App.css";
import Header from "./components/Header";
import Home from "./components/Home";
import Checkout from "./components/Checkout";
import Login from "./components/Login";
import { useStateValue } from "./StateProvider";
import { auth } from "./firebase";

function App() {
  const [{user},dispatch] = useStateValue();
  useEffect(() =>{
    const unsubscribe = auth.onAuthStateChanged((authUser) =>{
      if(authUser){
        dispatch({
          type:"SET_USER",
          user: authUser
        })

      }else{
        dispatch({
          type:"SET_USER",
          user: null
        })
      }
  
  });
  return () => {
    unsubscribe();
  }
  
  },[])

  console.log("USER is >>>", user);

  return (
    <Router>
      <Switch>
        <Route path="/checkout">
          <Header />
          <Checkout />
        </Route>
        <Route path="/login">
          <Login/>
        </Route>
        <Route path="/">
          <Header />
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

I have tried different things but still picking up the wrong file and giving me an error. Tried npm i and npm i firebase nothign worked.

Thanks

Answer 1

Not sure if this would help, but exact thing happened to me when I upgraded firebase to version 7.24.0.

I changed version back to 7.16.0 and it works now.