Monday, 22 May 2023

Storybook - Cannot read property 'split' of undefined

I had this error when added MDX documentation to a story:

 

Uncaught TypeError: Cannot read property 'split' of undefined

    at parseKind (index.js:90)

    at defaultTitleSlot (Title.js:46)

    at Title (Title.js:71)

    at renderWithHooks (react-dom.development.js:14803)

    at mountIndeterminateComponent (react-dom.development.js:17482)

    at beginWork (react-dom.development.js:18596)

    at HTMLUnknownElement.callCallback (react-dom.development.js:188)

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)

    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)

    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:503)

 

Story:

 

import doc from './controls.mdx';

 

export default {

  title: 'Controls',

  parameters: {

    docs: {

      page: doc

    }

  },

  decorators: [

    moduleMetadata({

      declarations: [FooBarComponent],

      imports: [NgbModuleClickOutsideModule]

    }),

    withPreview

  ]

};

 

export const TooltipClick = () => ({

  component: FooBarComponent,

  template: statusProcessTemplate

});

TooltipClick.story = {

  name: 'Process status',

  parameters: { preview: [{ tab: 'HTML'language: 'html'template: statusProcessTemplate }] }

};

 

I don't know why, but I removed the line:

component: FooBarComponent,

and then documentation started working again.