未找到模块：错误：您尝试导入项目 src/ 目录之外的 /firebase/app

Question

I had it working on a different project before and going off that as a reference but I still get this same error. My utils folder is inside the src directory. Can not seem to find out whats going on. Directory image

import { initializeApp } from '/firebase/app'
import { getAuth, signInWithRedirect, signInWithPopUp, GoogleAuthProvider } from '/firebase/auth'


// Your web app's Firebase configuration
const firebaseConfig = {
    // api keys //
};

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);


const provider = new GoogleAuthProvider()
provider.setCustomParameters({
    prompt: 'select_account'
})

export const auth = getAuth()
export const signInWithGooglePopUp = () => signInWithPopUp(auth, provider)


// Sign-in component //

import { signInWithGooglePopUp } from "../../utils/firebase/firebase.utils";

const SignIn = () => {
  const logGoogleUser = async () => {
    const response = await signInWithGooglePopUp();
  };

  return (
    <div>
      <h1>Sign In</h1>
      <button onClick={logGoogleUser}> Sign in with Google</button>
    </div>
  );
};

export default SignIn;

Answer 1

You didn't say what error you're getting, but presumably it can't find firebase.utils.js

My first guess would be your relative path is not correct from where node is running: ../../

Did you try removing the relative paths?

import { initializeApp } from '/firebase/app'
import { getAuth, signInWithRedirect, signInWithPopUp, GoogleAuthProvider 
} from '/firebase/auth'


// Your web app's Firebase configuration
const firebaseConfig = {
    // api keys //
};

// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);

const provider = new GoogleAuthProvider()
provider.setCustomParameters({
    prompt: 'select_account'
})

export const auth = getAuth()
export const signInWithGooglePopUp = () => signInWithPopUp(auth, 
provider)


// Sign-in component //

import { signInWithGooglePopUp } from 
"utils/firebase/firebase.utils";

const SignIn = () => {
const logGoogleUser = async () => {
    const response = await signInWithGooglePopUp();
  };

  return (
    <div>
      <h1>Sign In</h1>
      <button onClick={logGoogleUser}> Sign in with Google</button>
    </div>
  );
};

export default SignIn;