Next.js添加getServerSideProps后报_chalk.default.constructor不是构造函数错误

步骤1：修复getSession相关错误 #

你当前代码中调用了getSession但没有导入对应依赖，先执行以下操作：

• 如果还没有安装NextAuth，先执行安装命令：

  npm install next-auth
  

• 在Index.js文件顶部添加导入语句：
  如果使用的是NextAuth v4版本：

  import { getSession } from "next-auth/react";
  

  如果使用的是NextAuth v3版本：

  import { getSession } from "next-auth/client";
  

步骤2：修正next.config.js配置错误 #

images.domains配置仅支持填写纯域名，不能携带协议、端口、路径，你当前配置中的http://localhost:3000/不符合规范，修改为：

module.exports = {
  // reactStrictMode: true,
  webpack5: true,
  images: {
    domains: [
      "localhost",
      "m.media-amazon.com",
      "links.papareact.com",
      "platform-lookaside.fbsbx.com",
      "firebasestorage.googleapis.com",
      "facebookbrand.com",
      "pbs.twimg.com",
    ],
  },
};

步骤3：解决chalk依赖冲突报错 #

该报错是项目本地依赖安装损坏或者版本不兼容导致，按顺序执行以下操作即可：

1. 关闭当前运行的Next.js开发服务
2. 删除项目根目录下的node_modules文件夹、package-lock.json文件（如果使用yarn则删除yarn.lock文件）
3. 执行npm install重新安装所有依赖
4. 执行npm run dev重启开发服务

如果完成上述操作后仍存在报错，可以将Next.js升级到最新稳定版解决版本兼容问题：

npm install next@latest

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