Search code examples
javascriptangulartypescriptstorybook

"Cannot read properties of null (reading 'classList')" in Storybook 7 MDX?

Recently i update my project from storybook 6.5 to 7.

All Stories work well and the autodoc is perfect. Now I had the need to write a custom doc for a Button component, but when i use Story tag with of property i recive an Error when i open the docs page.

The documentation file is rendered in the correct place then in the 'Doc' page of the Button component.

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} />

This is the result of my Docs page enter image description here

Solution

  • After 2 days i find the solution.

    The problem is in preview.ts, in docs parameter there are a deprecated property set to false

    docs: { 
   inlineStories: false,
}

    I change this line in

    docs: { 
   story: {
      inline: false
   }
},

    and now it's work find.