storybookjs/mdx2-csf

Adding rehype plugins to `mdxCompilerOptions` crashes the stories

Closed this issue · 6 comments

JReinhold commented

Describe the bug

If you add any rehype plugins to the mdxCompilerOptions like this:

mdxCompileOptions: {
	rehypePlugins: [rehypeSlug, rehypeExternalLinks]
}

the Storybook story will crash with:

Error: page.evaluate: TypeError: Cannot destructure property 'id' of 'defaultExport' as it is undefined.
    at normalizeComponentAnnotations (https://635781f3500dd2c49e189caf-csxjymcqwo.capture.chromatic.com/sb-preview/runtime.mjs:31:1146)
    at processCSFFile (https://635781f3500dd2c49e189caf-csxjymcqwo.capture.chromatic.com/sb-preview/runtime.mjs:34:147)
    at StoryStore.memoizerific [as processCSFFileWithCache] (https://635781f3500dd2c49e189caf-csxjymcqwo.capture.chromatic.com/sb-preview/runtime.mjs:1:3610)
    at https://635781f3500dd2c49e189caf-csxjymcqwo.capture.chromatic.com/sb-preview/runtime.mjs:40:8422
    → Failed to publish build

This is because the mdxCompilerOptions are overriding everything at storybookjs/mdx2-csf@next/src/index.ts#L215-L216, so if they contain rehypePlugins they will override the required plugins defined just above. The rehypePlugins needs to be defined below instead, as a concatenation of the required and any user supplied ones.

Additional context

See original discussion and exploration at storybookjs/storybook#21858

MehakFatima24 commented

Hi, I will be working on this issue! ✋🏻

  • 👍1
MiroslavPetrik commented

This no longer crashes stories, but simply leaves the code snippets in MDX as empty <pre> tags.

My main.ts storybook config:

import tsconfigPaths from "vite-tsconfig-paths";
import rehypeHighlight from "rehype-highlight";

console.log(rehypeHighlight);

export default {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  staticDirs: ["../public"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    {
      name: "@storybook/addon-docs",
      options: {
        mdxPluginOptions: {
          mdxCompileOptions: {
            rehypePlugins: [rehypeHighlight],
          },
        },
      },
    },
  ],
  framework: { name: "@storybook/react-vite" },
  core: {
    builder: "@storybook/builder-vite",
    disableTelemetry: true,
  },
  async viteFinal(config) {
    return {
      ...config,
      plugins: [...(config.plugins || []), tsconfigPaths()],
    };
  },
};

This starts storybook successfully and logs into console the following.

[Function: rehypeHighlight]
info Found existing addon {"name":"@storybook/addon-docs","options":{"mdxPluginOptions":{"mdxCompileOptions":{"rehypePlugins":[null]}}}}, skipping.

Not sure where the null is coming from or what to do here. Is the plugin ignored by storybook or it doesnt work? I'm confused.

  • 👍1
alexandrutatarciuc commented

I have the same issue as @MiroslavPetrik. Any known workarounds or what actually causes the issue?

alexandrutatarciuc commented

If your ultimate goal is to add syntax highlighting for another language, you should do this instead:

  1. Add react-syntax-highlighter and @types/react-syntax-highlighter packages.
  2. In your preview.ts, register the language (for example, scss)
import scss from "react-syntax-highlighter/dist/cjs/languages/prism/scss";
import { SyntaxHighlighter } from "@storybook/components";

SyntaxHighlighter.registerLanguage('scss', scss);

Just to make it clear, this doesn't solve the described issue with rehypePlugins, but hopefully it will help someone who's looking for how to add syntax highlighting for another language.

JReinhold commented

This issue was fixed by #42 but was never closed.

@MiroslavPetrik the warning you're seeing is because you both have addon-essentials and addon-docs specified, which is invalid because addon-essentials contains addon-docs. See https://storybook.js.org/docs/essentials#configuration

So in short, if you want to configure any of the essential addons (like addon-docs) you have to install the addons separately, which is outlined in the docs linked above.

Here's an example where I add the rehype-video plugin that turns video links into video elements, and it looks to work fine.

https://stackblitz.com/~/edit/github-khpk2s?file=src%2Fstories%2FTestRehype.mdx