升级Node版本后Next.js项目next.config.js引入Firebase模块报错及Firestore配置问题求助

看起来你遇到的核心问题是next.config.js本质是CommonJS模块，升级Node后它的模块解析规则更严格了，不能直接使用ES模块的import语法；另外，你错误地在构建配置文件里处理了客户端Firestore的初始化配置，这本来就不属于next.config.js的职责范围。

让我们一步步解决：

1. 修复next.config.js的模块语法问题 #

next.config.js是Node.js运行的配置文件，默认采用CommonJS规范，所以不能用import，也不应该在这里处理Firestore客户端配置。把你的next.config.js改成纯CommonJS写法，移除Firestore相关代码：

/** @type {import('next').NextConfig} */
const withPWA = require("next-pwa");

module.exports = withPWA({
  reactStrictMode: true,
  i18n: {
    locales: ['en', 'jp', 'pl'],
    defaultLocale: 'en',
  },
  images: {
    deviceSizes: [280, 320, 375, 425, 768, 1024, 1200, 1440, 2560],
    loader: 'default',
    domains: ['firebasestorage.googleapis.com', 's.yimg.com'],
    formats: ['image/avif', 'image/webp'],
  },
  pwa: {
    dest: "public",
    register: true,
    skipWaiting: true,
  },
});

2. 在正确的位置配置Firestore持久化和缓存 #

Firestore的enableIndexedDbPersistence和cacheSizeBytes是客户端运行时的配置，应该放在你的Firebase初始化文件（firebase.js）或者Next.js的_app.js里。

方案一：在firebase.js里配置 #

修改你的firebase.js，在获取Firestore实例后直接配置：

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getStorage } from 'firebase/storage';
import { getFirestore, persistentLocalCache, initializeFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: `${process.env.NEXT_PUBLIC_API_KEY}`,
  authDomain: `${process.env.NEXT_PUBLIC_AUTH_DOMAIN}`,
  projectId: `${process.env.NEXT_PUBLIC_PROJ_ID}`,
  storageBucket: `${process.env.NEXT_PUBLIC_STORAGE_BUCKET}`,
  messagingSenderId: `${process.env.NEXT_PUBLIC_SENDER_ID}`,
  appId: `${process.env.NEXT_PUBLIC_APP_ID}`
};

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

// 配置Firestore持久化和缓存
// 注意：400字节太小了，建议改成400MB（400*1024*1024），否则会频繁缓存失效
export const db = initializeFirestore(app, {
  localCache: persistentLocalCache({
    cacheSizeBytes: 400 * 1024 * 1024
  })
});

// 启用持久化（persistentLocalCache已包含持久化，额外处理错误场景）
db.enablePersistence()
  .catch((e) => {
    if (e.code === 'failed-precondition') {
      console.error('多个标签页打开，持久化无法启用');
    } else if (e.code === 'unimplemented') {
      console.error('当前浏览器不支持IndexedDB');
    }
  });

方案二：在_app.js里配置（适合延迟初始化场景） #

如果你的Firebase初始化需要依赖客户端环境，可以在pages/_app.js（或App Router下的app/layout.js）里处理：

import { useEffect } from 'react';
import { db } from '../firebase';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // 启用持久化
    db.enablePersistence()
      .catch((e) => {
        if (e.code === 'failed-precondition') {
          console.error('多个标签页打开，持久化无法启用');
        } else if (e.code === 'unimplemented') {
          console.error('当前浏览器不支持IndexedDB');
        }
      });
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

3. 为什么之前能运行？ #

旧版本的Node可能对CommonJS文件里的ES模块语法有宽松兼容，或者你的旧项目有转译配置（比如Babel）自动处理了这些语法，但升级Node后这种兼容被移除，现在必须严格遵循模块规范。

另外，npm和yarn的包管理差异不会直接导致这个问题，主要是Node版本升级带来的模块解析规则变化。

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