Next.js13 和 Contentlayer 语法-突出显示错误问题

Question

使用 tailwind、contentlayer 在 Next.js13 上制作博客并进行语法高亮，尝试使用 rehype-pretty-code 和 rehype-highlight 库；但一些类型错误不断出现，我不知道如何处理这个问题。以下错误

Type '(options?: Readonly<Options> | null | undefined) => (tree: Root, file: VFile) => undefined' is not assignable to type 'Pluggable<any[]>'.
  Type '(options?: Readonly<Options> | null | undefined) => (tree: Root, file: VFile) => undefined' is not assignable to type 'Plugin<any[], any, any>'.
    Type '(tree: Root, file: VFile) => undefined' is not assignable to type 'void | Transformer<any, any>'.
      Type '(tree: Root, file: VFile) => undefined' is not assignable to type 'Transformer<any, any>'.
        Types of parameters 'file' and 'file' are incompatible.
          Type 'import("/Users/joonpark/Desktop/Projects/nextjs/joon-dev-blog/node_modules/vfile/lib/index").VFile' is not assignable to type 'import("/Users/joonpark/Desktop/Projects/nextjs/joon-dev-blog/node_modules/rehype-highlight/node_modules/vfile/lib/index").VFile'.
            Types of property 'messages' are incompatible.
              Type 'import("/Users/joonpark/Desktop/Projects/nextjs/joon-dev-blog/node_modules/vfile/node_modules/vfile-message/lib/index").VFileMessage[]' is not assignable to type 'import("/Users/joonpark/Desktop/Projects/nextjs/joon-dev-blog/node_modules/vfile-message/lib/index").VFileMessage[]'.
                Type 'VFileMessage' is missing the following properties from type 'VFileMessage': ancestors, place

---

这是我的 contentlayer.config.ts 文件

import { defineDocumentType, makeSource } from 'contentlayer/source-files';
import rehypeHighlight from 'rehype-highlight';
import rehypePrettyCode from 'rehype-pretty-code';
import remarkGfm from 'remark-gfm';

export const Post = defineDocumentType(() => ({
  name: 'Post',
  filePathPattern: `**/*.mdx`,
  fields: {
    title: { type: 'string', required: true },
    date: { type: 'date', required: true },
  },
  computedFields: {
    url: {
      type: 'string',
      resolve: (post) => `/posts/${post._raw.flattenedPath}`,
    },
  },
}));

/** @type {import('rehype-pretty-code').Options} */
const options = {
  theme: 'one-dark-pro',
};

export default makeSource({
  contentDirPath: 'posts',
  documentTypes: [Post],
  mdx: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [[rehypePrettyCode, options], rehypeHighlight],
  },
});

我用谷歌搜索，询问了chatGPT（答案很差）。 在 github 问题中只看到了一些类似的案例，但我所需要的只是更新库并且对于当前版本应该不是问题。

有人知道这是什么类型的错误吗？我应该编辑模块文件夹中的index.d.ts 文件吗？？

Answer 1

我遇到了完全相同的问题，但无法解决。 所以我将

ignoreBuildErrors: true

添加到

next.config.js

以绕过它。 使用时有效

npm run build

希望这会有所帮助

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {},
  typescript: {
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    ignoreBuildErrors: true,
  }
}

module.exports = nextConfig

Answer 2

没有什么是一点类型转换不能解决的！

将

import { Pluggable } from "unified";

添加到文件顶部。

unified

是 Contentlayer 的一部分，因此您应该已经可以使用它了。

然后将

as Pluggable[]

添加到插件数组的末尾，即：

  mdx: {
    remarkPlugins: [remarkGfm] as Pluggable[],
    rehypePlugins: [
      [rehypePrettyCode, options], // I'm not certain, but
                                   // you may need to add
                                   // `as Pluggable[]` here, too.
      rehypeHighlight
    ] as Pluggable[]
  },