Next.js 13.4.5集成Firebase 10.1.0时'encoding'模块缺失错误求助

环境信息 #

• Next.js 版本：13.4.5
• Firebase 版本：10.1.0

报错信息 #

警告 #

• warn ./node_modules/node-fetch/lib/index.js Module not found: Can't resolve 'encoding' in '/Users/dev/node_modules/node-fetch/lib'
  导入追踪：./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

相关代码片段 #

authContext.tsx #

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

firebase.ts #

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

解决方案 #

1. 安装缺失的encoding依赖

npm install encoding

2. 配置Next.js webpack fallback（若步骤1无效）
   在项目根目录的next.config.js（没有则新建）中添加以下配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      encoding: require.resolve('encoding'),
    };
    return config;
  },
};

module.exports = nextConfig;

3. 重启开发服务

npm run dev

内容的提问来源于stack exchange，提问作者aaa