在NextJS中集成Contentlayer时遭遇构建错误求助

错误详情 #

添加withContentlayer到next.config.js后出现构建错误：

web:build: TypeError: Cannot destructure property 'ConnectionOptionsReader' of 'i(...)' as it is undefined.

可能的解决步骤 #

• 检查版本兼容性
  Contentlayer和NextJS版本必须匹配：

  • Contentlayer v0.3.x 要求 NextJS 13.4+
  • 若使用NextJS 12或更早版本，需降级Contentlayer到v0.2.x
    可在package.json中指定对应版本：

  "contentlayer": "^0.2.9",
  "next-contentlayer": "^0.2.9"
  

• 清理依赖缓存并重装
  缓存损坏可能导致依赖加载异常，执行以下命令：

  rm -rf node_modules package-lock.json
  npm install
  

  使用yarn则替换为：

  rm -rf node_modules yarn.lock
  yarn install
  

• 确保安装完整依赖
  必须同时安装contentlayer和next-contentlayer，不要遗漏前者：

  npm install contentlayer next-contentlayer
  

• 切换到ES模块导入方式
  规避require语法的兼容性问题，修改配置文件格式：

  1. 将next.config.js重命名为next.config.mjs
  2. 修改代码为：

  import { withContentlayer } from 'next-contentlayer'
  
  const nextConfig = {
    // 你的原有配置内容
  }
  
  export default withContentlayer(nextConfig)
  

• 检查插件包裹顺序
  若配置文件同时使用其他NextJS插件（如next-transpile-modules），需确保withContentlayer作为最外层包裹函数：

  import { withContentlayer } from 'next-contentlayer'
  import withTM from 'next-transpile-modules'(['目标模块名'])
  
  const nextConfig = {
    // 配置内容
  }
  
  export default withContentlayer(withTM(nextConfig))
  

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