Next.js 14集成Contentlayer遇opentelemetry依赖错误求助

错误信息 #

执行pnpm dev时抛出以下错误：

node:internal/process/promises:289
triggerUncaughtException(err, true /* fromPromise */);
^

Error: Cannot find package 'C:\Users\abzyno\Documents\cooding-projects\portfilio\node_modules\.pnpm\@effect-ts+otel-exporter-trace-otlp-grpc@0.15.1_@effect-ts+core@0.60.5_@opentelemetry+api@1.7_jjyayjty4b3tnebzec375s45rq\node_modules\@opentelemetry\exporter-trace-otlp-grpc\package.json' imported from C:\Users\abzyno\Documents\coding-projects\portfilio\node_modules\.pnpm\@effect-ts+otel-exporter-trace-otlp-grpc@0.15.1_@effect-ts+core@0.60.5_@opentelemetry+api@1.7_jjyayjty4b3tnebzec375s45rq\node_modules\@effect-ts\otel-exporter-trace-otlp-grpc\_mjs\index.mjs
Did you mean to import @opentelemetry+exporter-trace-otlp-grpc@0.39.1_@opentelemetry+api@1.7.0/node_modules/@opentelemetry/exporter-trace-otlp-grpc/build/src/index.js?

    at legacyMainResolve (node:internal/modules/esm/resolve:189:26)
    at packageResolve (node:internal/modules/esm/resolve:776:14)
    at moduleResolve (node:internal/modules/esm/resolve:838:20)
    at defaultResolve (node:internal/modules/esm/resolve:1043:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
    at moduleJob (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Peer依赖警告 #

安装依赖时出现以下警告：

WARN  Issues with peer dependencies found
.
├─┬ contentlayer 0.3.4
│ └─┬ @contentlayer/cli 0.3.4
│   └─┬ @contentlayer/core 0.3.4
│     ├── ✕ unmet peer esbuild@"0.17.x || 0.18.x": found 0.19.9
│     └─┬ @contentlayer/utils 0.3.4
│       └─┬ @opentelemetry/exporter-trace-otlp-grpc 0.39.1
│         ├─┬ @opentelemetry/core 1.13.0
│         │ └── ✕ unmet peer @opentelemetry/api@">=1.0.0 <1.5.0": found 1.7.0 in @contentlayer/utils

配置文件 #

contentlayer.config.js #

import { defineDocumentType, makeSource } from "contentlayer/source-files"
import rehypeAutolinkHeadings from "rehype-autolink-headings"
import rehypePrettyCode from "rehype-pretty-code"
import rehypeSlug from "rehype-slug"
import remarkGfm from "remark-gfm"

/** @type {import('contentlayer/source-files').ComputedFields} */
const computedFields = {
  slug: {
    type: "string",
    resolve: (doc) => `/${doc._raw.flattenedPath}`,
  },
  slugAsParams: {
    type: "string",
    resolve: (doc) => doc._raw.flattenedPath.split("/").slice(1).join("/"),
  },
}

export const Blog = defineDocumentType(() => ({
  name: "Blog",
  filePathPattern: `blog/**/*.mdx`,
  contentType: "mdx",
  fields: {
    title: {
      type: "string",
      required: true,
    },
    excerpt: {
      type: "string",
    },
    date: {
      type: "date",
      required: true,
    },
    draft: {
      type: "boolean",
      default: false,
    },
  },
  computedFields,
}))

export default makeSource({
  contentDirPath: "content",
  documentTypes: [Blog],
  mdx: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [
      rehypeSlug,
      [
        rehypePrettyCode,
        {
          theme: "github-dark",
          onVisitLine(node) {
            if (node.children.length === 0) {
              node.children = [{ type: "text", value: " " }]
            }
          },
          onVisitHighlightedLine(node) {
            node.properties.className.push("line--highlighted")
          },
          onVisitHighlightedWord(node) {
            node.properties.className = ["word--highlighted"]
          },
        },
      ],
      [
        rehypeAutolinkHeadings,
        {
          properties: {
            className: ["subheading-anchor"],
            ariaLabel: "Link to section",
          },
        },
      ],
    ],
  },
})

next.config.js #

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

/** @type {import('next').NextConfig} */
const nextConfig = { reactStrictMode: true, swcMinify: true }

module.exports = withContentlayer(nextConfig)

解决方案 #

问题根源是依赖版本不兼容，按以下步骤修复：

1. 处理opentelemetry版本冲突
   在package.json中添加pnpm overrides，强制指定兼容的@opentelemetry/api版本：

{
  "pnpm": {
    "overrides": {
      "@opentelemetry/api": "1.4.1"
    }
  }
}

2. 降级esbuild到兼容版本
   安装Contentlayer要求的esbuild版本（0.17.x或0.18.x）：

pnpm add esbuild@0.18.20 --save-dev

3. 清理缓存并重新安装依赖

pnpm cache clean
pnpm install

4. 重启开发服务

pnpm dev

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