Support for .md / .mdx files in storybook

[nate-summercook]

I am migrating my project from webpack to rsbuild and am currently in the process of trying to make storybook work with the adapted setup. Using this library, I'd have expected it to support .mdx files out of the box, as it's pretty standard for storybook.
So I started out with a simple configuration without any custom .md(x) configuration. Doesn't complain about .mdx, but about my .md import within an .mdx file. Since in webpack I have been dealing with .md files by adding a rule to treat .md as type asset/source, I thought I could simply do that here too, but to no avail. I've also used this rule successfully with rsbuild when referencing .md from within .ts files.

const storybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-designs',
  ],
  core: {
    disableTelemetry: true,
  },
  docs: {
    autodocs: true,
  },
  framework: 'storybook-react-rsbuild',
  rsbuildFinal: (config) => {
    return mergeRsbuildConfig(config, {
      tools: {
        rspack(config, { addRules }) {
          addRules([
            {
              test: /\.md$/,
              type: 'asset/source',
            },
          ]);
        },
      },
      plugins: [pluginReact()],
    });
  },
}

My suspicion is, that this rule is not applied within for .mdx files and therefore it still doesn't know what to do with that .md import in my .mdx file.
Did I simply miss some additinoal config, or is this not yet supported?
I also did try using the pluginMdx(), but that only made things worse (weird errors on .mdx files that weren't complaining without the plugin.

[fi3ework]

storybook-rsbuild's configuration is a little complex so for now you had to write the rsbuildFinal in the following style

import { mergeRsbuildConfig } from '@rsbuild/core'
import type { StorybookConfig } from 'storybook-react-rsbuild'
import { join, dirname } from 'path'

/**
 * This function is used to resolve the absolute path of a package.
 * It is needed in projects that use Yarn PnP or are set up within a monorepo.
 */
function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, 'package.json')))
}

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    getAbsolutePath('@storybook/addon-onboarding'),
    getAbsolutePath('@storybook/addon-links'),
    getAbsolutePath('@storybook/addon-essentials'),
    getAbsolutePath('@chromatic-com/storybook'),
    getAbsolutePath('@storybook/addon-interactions'),
  ],
  framework: {
    name: getAbsolutePath('storybook-react-rsbuild'),
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  typescript: {
    reactDocgen: 'react-docgen',
    check: true,
  },
  rsbuildFinal: (config) => {
    return mergeRsbuildConfig(config, {
      tools: {
+       rspack(config, { addRules, mergeConfig }) {
+         return mergeConfig(config, {
+             module: {
+              rules: [
+               {
+                test: /\.md$/,
+                type: 'asset/source',
+             },
+              ],
+           },
          })
        },
      },
    })
  },
}

export default config

[fi3ework]

With above configuration, the .md could be rendered as plain text instead of Markdown style. Is that identical with webpack?

[nate-summercook]

Well, I'm importing it plain text to render it within an .mdx file. So that should work. Can't test it though until #30 is addressed ;) Unless I'd set up a separate project just to test this.

[fi3ework]

So when importing and using a .md in .mdx, the .md file could be render as Markdown content with webpack & SB8?

[nate-summercook]

webpack & SB7, yes. But the import was *.md?raw but I think that results in pretty much the same.

[fi3ework]

I'll test does it works on webpack and SB8 then align with it.