0
import { serialize } from 'next-mdx-remote/serialize';
import readingTime from 'reading-time';
import remarkGfm from 'remark-gfm';
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import rehypePrettyCode from 'rehype-pretty-code';

/** @type {import('rehype-pretty-code').Options} */
const options = {
    theme: 'one-dark-pro',
    onVisitLine(node: any) {
        if (node.children.length === 0) {
            node.children = [{ type: 'text', value: ' ' }];
        }
    },
    onVisitHighlightedLine(node: any) {
        node.properties.className.push('line--highlighted');
    },
    onVisitHighlightedWord(node: any) {
        node.properties.className = ['word--highlighted'];
    },
};

export async function mdxToHtml(source: any) {
    const mdxSource = await serialize(source, {
        mdxOptions: {
            remarkPlugins: [remarkGfm],
            rehypePlugins: [
                rehypeSlug,
                [rehypePrettyCode, options],
                [
                    rehypeAutolinkHeadings,
                    {
                        properties: {
                            className: ['anchor'],
                        },
                    },
                ],
            ],
            format: 'mdx',
        },
    });

    return {
        html: mdxSource,
        wordCount: source.split(/\s+/gu).length,
        readingTime: readingTime(source).text,
    };
}

got this error in vercel logs while building pages and i am using app router

ENOENT: no such file or directory, open '/var/task/node_modules/shiki/themes/one-dark-pro.json'

and i also install shiki package but shill get that same error message on vercel logs

when i build the code it will compile successfully but when i use ondemand revalidate through api like this function revalidatePath it give me error in vercel logs

Pratham
  • 53
  • 3

1 Answers1

0

I run to the same problem with Nextjs 13 monorepo. Nextjs doesn't include shiki assets (themes, languages,...) in its production build because shiki loads these assets with "fs" instead of "import". If you aren't in a monorepo setup, you can try one of the following ways:

  1. Let Nextjs knows about shiki by adding it to next.config.js
{
  experimental: {
    serverComponentsExternalPackages: ["shiki"]
  }
}
  1. Follow this answer: https://github.com/shikijs/shiki/issues/138#issuecomment-1057471160

Unluckily, I don't stand a chance with these methods. I am trying to find another workaround for monorepo setup. Looks like there is a problem with pnpm workspaces.

dangminhngo
  • 1