Unable to integrate contentlayer in Next.js 14

Question

I'm trying to integrate Contentlayer for MDX rendering in my Next.js project, but I'm encountering an error when running pnpm dev. The error message I'm receiving is:

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

Error: Cannot find package 'C:\Users\abzyno\Documents\cooding-projects\portfilio\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_jjyayjty4b3tnebzec375s45rq\node_modules\@opentelemetry\exporter-trace-otlp-grpc\package.json' imported from C:\Users\abzyno\Documents\coding-projects\portfilio\node_modules\.pnpm\@[email protected]_@[email protected]_@[email protected]_jjyayjty4b3tnebzec375s45rq\node_modules\@effect-ts\otel-exporter-trace-otlp-grpc\_mjs\index.mjs
Did you mean to import @[email protected]_@[email protected]/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)
m/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

During the installation process, I encountered the following warning related to peer dependencies:

 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
    at link (node:internal/modules/esm/module_job:84:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Configuration Files:

//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)

I'm using Contentlayer for defining the Blog document type and Next.js along with its content layer plugin.

Expectation:

I expect Contentlayer to integrate smoothly without encountering the import error related to opentelemetry which is causing internal server error in the browser.