Storybook 7 MDX使用Story标签报Cannot read properties of null错误

问题情况 #

从Storybook 6.5升级到7.x后，所有普通Story和自动生成的文档都正常运行，但在编写Button组件的自定义MDX文档时，使用带of属性的<Story>标签打开页面会抛出**"Cannot read properties of null (reading 'classList')"**错误，且MDX文件已正确关联到Button组件的文档页位置。

涉及代码 #

Button.stories.ts #

import { Meta, StoryObj } from '@storybook/angular';
import ScButtonComponent from 'xxx/components/base/button/button.component';

const meta: Meta<ScButtonComponent> = {
  title: 'Component/Base/Button',
  component: ScButtonComponent,
};

export default meta;
type Story = StoryObj<ScButtonComponent>;

export const Primary: Story = {
  args: {
    level: 'primary',
    label: 'Click',
  }
}

export const Secondary: Story = {
  args: {
    level: 'secondary',
    label: 'Click',
  }
}

export const Tertiary: Story = {
  args:{
    level: 'tertiary',
    label: 'Click',
  }
}

export const Icons: Story = {
  args: {
    level: 'icon',
    iconAfter: 'fa-solid fa-question'
  }
}

button.mdx #

{/* button.mdx */}

import { Canvas, Story, Meta } from '@storybook/blocks';

import * as ButtonStories from './button.stories';

<Meta of={ButtonStories} />

# Button

<Story of={ButtonStories.Primary} />

报错截图 #

解决步骤 #

1. 调整MDX中<Story>的用法
   Storybook 7重构了MDX渲染逻辑，<Story>必须放在<Canvas>组件内部才能正确初始化DOM元素。修改后的MDX代码：

   import { Canvas, Story, Meta } from '@storybook/blocks';
   import * as ButtonStories from './button.stories';
   
   <Meta of={ButtonStories} />
   
   # Button
   
   <Canvas>
     <Story of={ButtonStories.Primary} />
   </Canvas>
   

2. 统一Storybook相关依赖版本
   确保@storybook/angular、@storybook/blocks等所有Storybook相关包的版本完全一致，版本不匹配会引发DOM渲染类异常。修改package.json统一版本后重新安装依赖：

   npm install
   

3. 清理缓存并重启Storybook
   清理旧构建缓存后重启服务，避免缓存残留导致的异常：

   npx storybook build --clean
   npm run storybook
   

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