Next.js - TypeError：无法将 undefined 或 null 转换为对象

Question

尝试在本地运行我的项目时出现此“TypeError：无法将未定义或 null 转换为对象”错误（下面的屏幕截图）。

我已经尝试更新 package.json 中的所有包。我尝试删除节点模块和 package-lock.json 文件并运行 npm install。我也试过注释掉很多项目代码，但仍然得到同样的错误。

我认为这与 next-auth 或可能与 .env.local 文件有关，但我真的不确定是什么导致了这个问题。

// .env.local

GOOGLE_CLIENT_ID=********
GOOGLE_CLIENT_SECRET=********
GITHUB_CLIENT_ID=********
GITHUB_CLIENT_SECRET=********
EMAIL_SERVER_HOST=********
EMAIL_SERVER_PORT=********
EMAIL_SERVER_USER=********
EMAIL_SERVER_PASSWORD=********
EMAIL_FROM=********
NEXTAUTH_URL=********
SECRET=********

// [...nextauth].js

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import GitHubProvider from "next-auth/providers/github";
import EmailProvider from "next-auth/providers/email";
import { FirebaseAdapter } from "@next-auth/firebase-adapter";
import { initializeApp, getApp, getApps } from "firebase/app";
import {
  getFirestore,
  collection,
  query,
  getDocs,
  where,
  limit,
  doc,
  getDoc,
  addDoc,
  updateDoc,
  deleteDoc,
  runTransaction,
} from "firebase/firestore";

const firebaseConfig = {
  apiKey: ********,
  authDomain: ********,
  projectId: ********,
  storageBucket: ********,
  messagingSenderId: ********,
  appId: ********,
};

const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
const db = getFirestore();

export default NextAuth({
  // Configure one or more authentication providers
  adapter: FirebaseAdapter({
    db,
    collection,
    query,
    getDocs,
    where,
    limit,
    doc,
    getDoc,
    addDoc,
    updateDoc,
    deleteDoc,
    runTransaction,
  }),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_FROM,
    }),

    // ...add more providers here
  ],
  // pages: {
  //   signIn: "/auth/signin",
  // },
  callbacks: {
    async session({ session, token, user }) {
      if (session.user.name) {
        user.username = session.user.name
          .split(" ")
          .join("")
          .toLocaleLowerCase();
      } else {
        user.username = session.user.email.split("@")[0];
      }
      session.user.image
        ? (user.image = session.user.image)
        : (user.image =
            "https://villagesonmacarthur.com/wp-content/uploads/2020/12/Blank-Avatar.png");

      return {
        user,
      };
    },
    // async user({ session, token, user }) {
    //   user.userId = user.id;

    //   return {
    //     id: user.userId,
    //   };
    // },
  },
  secret: process.env.SECRET,
});

// package.json

{
  "name": "instagram-clone",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.3",
    "@heroicons/react": "^2.0.12",
    "@next-auth/firebase-adapter": "^1.0.2",
    "firebase": "^9.12.1",
    "moment": "^2.29.4",
    "next": "latest",
    "next-auth": "4.14.0",
    "nodemailer": "^6.8.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-moment": "^1.1.2",
    "react-router-dom": "^6.4.2",
    "recoil": "^0.7.6",
    "tailwind-scrollbar-hide": "^1.1.7"
  },
  "devDependencies": {
    "@faker-js/faker": "^7.6.0",
    "@tailwindcss/forms": "^0.5.3",
    "autoprefixer": "^10.4.12",
    "eslint": "8.25.0",
    "eslint-config-next": "12.3.1",
    "postcss": "^8.4.18",
    "tailwind-scrollbar": "^2.0.1",
    "tailwindcss": "^3.1.8"
  }
}

Answer 1

对于遇到此问题的任何人，我通过执行以下操作来修复它...

1. 删除节点模块
2. 删除 package-lock.json
3. npm install --legacy-peer-deps