content-collections icon indicating copy to clipboard operation
content-collections copied to clipboard

Next.js 15: Getting error from esbuild with `shiki` `langAlias` config

Open bismitpanda opened this issue 6 months ago • 5 comments

Whenever I add langALias to the @shikijs/rehype plugin, the build for the .mdx file containing a code block with the aliased language fails.

const blogs = defineCollection({
  name: "blogs",
  directory: "content",
  include: "blogs/*.mdx",
  schema: blogSchema,
  transform: async (_data, context) => {
    // Other ops

    const html = await compileMDX(context, data, {
      remarkPlugins: [
        remarkMath,
        remarkGemoji,
        [remarkGfm, { singleTilde: false }],
      ],
      rehypePlugins: [
        rehypeSlug,
        [rehypeAutolinkHeadings, { behavior: "wrap" }],
        rehypeKatex,
        [
          rehypeShiki,
          {
            theme: "material-theme-darker",
            transformers: [
              transformerNotationDiff(),
              transformerNotationHighlight(),
              transformerNotationFocus(),
              transformerNotationErrorLevel(),
              {
                pre(hast) {
                  hast.properties["data-meta"] = this.options.meta?.__raw;
                  hast.properties["data-code"] = this.source;
                  hast.properties["data-language"] = this.options.lang;
                },
                code(hast) {
                  hast.properties["data-line-numbers-max-digits"] =
                    this.lines.length.toString().length;
                },
              } satisfies ShikiTransformer,
            ],
            inline: "tailing-curly-colon",
            langAlias: {
              "file-tree": "plain", // this fails if used
            },
          },
        ],
      ],
    });

    return {
      ...data,
      html,
    };
  },
});
## A file tree example

```file-tree
\```

Image

I have 2 mdx files, but the one where file-tree lang is used, fails

bismitpanda avatar Jun 15 '25 14:06 bismitpanda

I'm not sure if this is a problem with content collections. Can you provide a sample repository?

sdorra avatar Jun 15 '25 18:06 sdorra

I did not get any good error message, so I asked here. it might be an issue with shiki or maybe @mdx-js/esbuild. I use it in my portfolio. It does not have the code with the langAlias set. If you want I can setup a branch with it set.

bismitpanda avatar Jun 15 '25 19:06 bismitpanda

If you want I can setup a branch with it set.

Yes, please, then I would take a quick look to see if I notice anything.

sdorra avatar Jun 15 '25 19:06 sdorra

https://github.com/bismitpanda/portfolio-next/tree/langAlias-check

This is the branch. If you run pnpm build, it will be built, but an error will be shown and that file will not be added to the collection (blog collection), instead of the build failing.

If you go to localhost:3000/blog/kitchen-sink after pnpm dev, you can see the error.

bismitpanda avatar Jun 16 '25 08:06 bismitpanda

I think the problem is something with shiki. If i change the alias from file-tree to tree everything works as expected.

sdorra avatar Jun 16 '25 11:06 sdorra