CODEWITHSUNDEEP
javascriptnode.jsreactjsfirebasenext.js
aaa
aaa

Reputation: 125

Module not found: Can't resolve 'encoding' in '/Users/dev/node_modules/node-fetch/lib

I am using 13.4.5 of next.js.
firebase is using 10.1.0.
When I run npm run dev, I get the following warning.
After a while after the warinng, the error message will appear in the terminal.
I do not know how to solve it.

warning

  • warn ./node_modules/node-fetch/lib/index.js Module not found: Can't resolve 'encoding' in '/Users/dev/node_modules/node-fetch/lib'

Import trace for requested module: ./node_modules/node-fetch/lib/index.js ./node_modules/@firebase/auth/dist/node-esm/index.js ./node_modules/firebase/auth/dist/index.mjs ./src/app/context/authContext.tsx ./src/app/project/page.tsx

  • warn ./node_modules/node-fetch/lib/index.js Module not found: Can't resolve 'encoding' in '/Users/dev/node_modules/node-fetch/lib'

error

Import trace for requested module: ./node_modules/node-fetch/lib/index.js ./node_modules/@firebase/auth/dist/node-esm/index.js ./node_modules/firebase/auth/dist/index.mjs ./src/app/context/authContext.tsx ./src/app/project/page.tsx
- error undefined
- error undefined

"use client";
import {
  useContext,
  createContext,
  useState,
  useEffect,
  ReactNode,
} from "react";
import {
  User,
  GoogleAuthProvider,
  signInWithRedirect,
  signOut,
  onAuthStateChanged,
} from "firebase/auth";
import { auth } from "@/app/utils/firebase";
import { useGoToPage } from "@/app//hooks/useGoToPage";

interface IAuthContext {
  user: User | null;
  googleSignIn: () => void;
  logOut: () => void;
}

const AuthContext = createContext<IAuthContext>({
  user: null,
  googleSignIn: () => {},
  logOut: () => {},
});

interface AuthContextProviderProps {
  children: ReactNode;
}

export const AuthContextProvider = ({ children }: AuthContextProviderProps) => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  const [{ goToSignInPage }] = useGoToPage();

  const googleSignIn = async () => {
    const provider = new GoogleAuthProvider();
    signInWithRedirect(auth, provider);
  };

  const logOut = () => {
    signOut(auth);
    goToSignInPage();
  };

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser);
      setLoading(false);
    });

    if (!user && !loading) {
      goToSignInPage();
    }
    return () => unsubscribe();
  }, [user, goToSignInPage, loading]);

  return (
    <AuthContext.Provider value={{ user, googleSignIn, logOut }}>
      {children}
    </AuthContext.Provider>
  );
};

export const UserAuth = (): IAuthContext => {
  return useContext(AuthContext);
};


import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_DOMAIN,
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

Upvotes: 1

Views: 1053

Answers (1)

Mayank Kumar Chaudhari
Mayank Kumar Chaudhari

Reputation: 18538

You should initialize Firebase app only once. Update your @/app/utils/firebase to

import { initializeApp, getApps, getApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_DOMAIN,
};

if (getApps().length === 0) initializeApp(firebaseConfig);

export const auth = getAuth(getApp());

Upvotes: 1

Related Questions