基于Nx的Angular项目用@storybook/addon-docs配置MDX支持失败

AI 小北

2026-9-27

解决方案

1. 确认依赖版本匹配

你使用的Storybook 6.3.x 仅支持 MDX v1，需先安装对应版本的依赖，避免版本不兼容问题：

所有@storybook/开头的包统一锁定为6.3.7版本
安装@mdx-js/loader@1.x、@mdx-js/react@1.x，禁止安装2.x版本
确保已经安装@storybook/addon-docs@6.3.7

2. 修正main.js配置

你当前手动添加的MDX webpack规则会和@storybook/addon-docs内置的预设规则冲突，直接删除自定义的MDX处理规则，同时在addons数组中显式引入addon-docs预设即可，修改后的配置参考：

const rootMain = require('../../../.storybook/main');

module.exports = {
  ...rootMain,

  core: { ...rootMain.core, builder: 'webpack5' },

  stories: [...rootMain.stories, '../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  // 显式添加addon-docs预设
  addons: [...rootMain.addons, '@storybook/addon-docs'],
  webpackFinal: async (config, { configType }) => {
    if (rootMain.webpackFinal) {
      config = await rootMain.webpackFinal(config, { configType });
    }

    // 删除原有的.mdx处理规则，保留source-loader即可（如果需要展示源码）
    config.module.rules.push({
      test: /\.(stories|story)\.[tj]sx?$/,
      loader: require.resolve('@storybook/source-loader'),
      exclude: [/node_modules/],
      enforce: 'pre',
    });

    return config;
  },
};