React Storybook中stories.mdx文件无法正常加载问题求助

MDX文件本身是否正确？ #

你的MDX代码语法没问题，错误不是出自内容本身，而是Storybook缺少处理MDX文件的loader配置。

具体修复步骤 #

• 先确认依赖安装完整
  执行命令安装MDX和文档插件的依赖：

  npm install --save-dev @storybook/addon-docs @mdx-js/react
  

• 检查.storybook/main.js配置
  确保配置里包含MDX文件的扫描规则和文档插件：

  module.exports = {
    stories: [
      '../components/**/*.stories.mdx', // 匹配你的MDX文件路径
      '../components/**/*.stories.@(js|jsx|ts|tsx)'
    ],
    addons: [
      '@storybook/addon-docs',
      // 保留你其他已有的addons
    ],
  };
  

• 手动配置webpack loader（自动配置失效时用）
  如果上面的配置还没解决问题，在.storybook/main.js里添加webpack规则：

  module.exports = {
    // 其他已有配置
    webpackFinal: async (config) => {
      config.module.rules.push({
        test: /\.mdx$/,
        use: [
          {
            loader: 'babel-loader',
            options: { presets: ['@babel/preset-react'] }
          },
          '@mdx-js/loader'
        ]
      });
      return config;
    }
  };
  

• 清理缓存重启Storybook

  npx storybook dev --no-manager-cache
  

可选优化 #

你的MDX里导入的ComponentStory和ComponentMeta在MDX文件中其实用不上，可以直接删除这行导入，不影响功能：

// 可删除，MDX环境不需要这个导入
import { ComponentStory, ComponentMeta } from '@storybook/react';

内容的提问来源于stack exchange，提问作者Saif