Next.js13 & Contentlayer Syntax-Highlight Error issues

Question

making blog on Next.js13 with tailwind, contentlayer and for syntax-highlighting, tried to use rehype-pretty-code and rehype-highlight libraries; but some type error keep coming up and i have no idea how to handle this. below error

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

---

and this is my contentlayer.config.ts file

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],
  },
});

I did googlings, asked chatGPT(poor answer). And only seen a few similar cases in github issue, but all I got need to update the library and for current version should be not a problem.

Have anyone the idea of what kind type error is it? shoud I edit index.d.ts file from module folder??

Answer 1

I got exactly same problem and I can't solve it. So I add ignoreBuildErrors: true to next.config.js to by pass it. It works when using npm run build

Hope that this will help

/** @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

Nothing a bit of type-casting can't fix!

Add import { Pluggable } from "unified"; to the top of your file. unified is part of Contentlayer so it should be available to you already.

Then add as Pluggable[] to the end of your plugin arrays, i.e.:

  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[]
  },