NextJS 13.3（App目录）引入contentlayer/generated模块报错求助

检查生成文件是否存在 #

• 先确认是否执行过Contentlayer的构建命令：要么单独跑npx contentlayer build，要么在package.json的脚本里配置了关联命令，比如：

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

• 查看项目根目录下是否生成了.contentlayer文件夹，里面必须包含generated目录及对应TS文件。

修正tsconfig.json配置 #

• 确保include数组包含Contentlayer生成的文件，同时paths配置正确映射路径：

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "contentlayer/generated": ["./.contentlayer/generated"]
      }
    },
    "include": [
      "next-env.d.ts",
      "**/*.ts",
      "**/*.tsx",
      ".contentlayer/generated/**/*"
    ],
    "exclude": ["node_modules"]
  }
  

重启服务刷新类型检测 #

• 完全关闭当前的NextJS开发服务器，再重新启动（如果配置了contentlayer dev，确保它和Next服务一起运行）。
• 在VSCode等编辑器中，执行TypeScript: Restart TS Server命令（快捷键Ctrl+Shift+P调出命令面板），刷新类型检测。

验证contentlayer.config.js配置 #

• 确认配置文件中正确定义了文档类型，并指定了正确的MDX文件目录：

  import { defineDocumentType, makeSource } from 'contentlayer/source-files'
  
  export const Post = defineDocumentType(() => ({
    name: 'Post',
    filePathPattern: `**/*.mdx`,
    contentType: 'mdx',
    fields: {
      title: { type: 'string', required: true },
      date: { type: 'date', required: true }
    },
    computedFields: {
      slug: {
        type: 'string',
        resolve: (post) => post._raw.sourceFileName.replace(/\.mdx$/, '')
      }
    }
  }))
  
  export default makeSource({
    contentDirPath: 'posts',
    documentTypes: [Post]
  })
  

检查依赖完整性 #

• 确认所有必需依赖都已安装：

  npm install contentlayer next-contentlayer @types/mdx
  

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