MDX and Decorator with Storybook 6.1+

Viewed 284

I'm using Storybook Web Components and I have .mdx stories with lit-html rendering my components, when I try to use any decorators, even a simple function, it's giving me an error rendering.

enter image description here

Am I missing something very simple here? All I want is when from the toolbar, a global value is set, I want to set that value on the root of preview, but I can't even get that far.

Thanks in advance.

1 Answers

I'm running into the same error with Storybook, MDX and Stencil JS. The issue seems to be that MDX is parsing any .tsx style syntax into React elements instead of HTML or Strings (I don't understand the intrinsics well enough).

There is a fix, however it's not ideal:

<Story name="test">{`<my-component first="New Story"></my-component>`}</Story>

This defines the story template as a string but you loose syntax highlighting and it's kind of besides the point of writing MDX stories in the first place.

Related