使用pnpm dev时contentlayer/generated模块找不到的问题求助

排查及解决步骤 #

1. 替换开发脚本触发contentlayer生成 #

contentlayer不会自动生成generated模块，需要用next-contentlayer提供的命令替代原生next dev。检查并修改package.json的scripts：

"scripts": {
  "dev": "next-contentlayer dev",
  "build": "next-contentlayer build && next build"
}

之后重新执行pnpm dev，contentlayer会在启动时自动生成.contentlayer/generated目录（对应contentlayer/generated的导入路径）。

2. 确认contentlayer配置文件存在且有效 #

项目根目录必须有contentlayer.config.ts（或.js），配置示例如下，确保指定了文档源和类型定义：

import { defineDocumentType, makeSource } from 'contentlayer/source-files'

export const Project = defineDocumentType(() => ({
  name: 'Project',
  filePathPattern: `projects/*.md`,
  fields: {
    title: { type: 'string', required: true },
    date: { type: 'date', required: true },
  },
}))

export default makeSource({
  contentDirPath: 'content',
  documentTypes: [Project],
})

配置缺失或错误会导致生成失败。

3. 手动触发contentlayer生成 #

如果自动生成未生效，执行手动生成命令：

pnpm contentlayer build

执行后检查项目根目录是否出现.contentlayer/generated文件夹，这是contentlayer/generated导入对应的实际文件位置。

4. 调整pnpm的hoisting配置 #

pnpm默认的严格hoisting可能导致contentlayer生成的模块无法被Next.js识别。在项目根目录创建.npmrc文件，添加：

public-hoist-pattern[]=*contentlayer*

然后重新安装依赖并启动服务：

pnpm install
pnpm dev

5. 确认Next.js配置集成了contentlayer插件 #

检查next.config.js是否正确引入next-contentlayer的插件：

const { withContentlayer } = require('next-contentlayer')

module.exports = withContentlayer({
  // 你的其他Next.js配置项
})

未配置该插件会导致Next.js无法解析contentlayer生成的模块。

内容的提问来源于stack exchange，提问作者Amjad Al Rahal