Storybook: Story source code shows "MDXCreateElement" instead of actual source code

[NicolaSansom]

Describe the bug
The output of Show Code tabs mismatches the source

To Reproduce

1. Create a new .mdx story:

# Alert 

<Preview>
  <Story name="Alert with one option">
    {() => {
      const [visible, toggleVisible] = useState(false);
      return (
        <div>
          <button onClick={() => toggleVisible(!visible)}>Open Alert with one action</button>
          <Alert
            visible={visible}
            toggleVisible={() => toggleVisible(false)}
            title="Title"
            description="Description"
          />
        </div>
      );
    }}
  </Story>
</Preview>

1. Click on 'Show Code'
2. Scroll down to screenshot of output

Expected behavior
Output match contents of the <Story>

Screenshots

Code snippets
Full Story

import { Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { withA11y } from '@storybook/addon-a11y';
import { useState } from 'react';
import OverlayAlert from './OverlayAlert';

<Meta title="Components/Overlay - Alert" component={OverlayAlert} decorators={[withA11y]} />

# Overlay - Alert

<Preview>
  <Story name="Alert with one option">
    {() => {
      const [visible, toggleVisible] = useState(false);
      return (
        <div>
          <button onClick={() => toggleVisible(!visible)}>Open Alert with one action</button>
          <Alert
            visible={visible}
            toggleVisible={() => toggleVisible(false)}
            title="Title"
            description="Description"
          />
        </div>
      );
    }}
  </Story>
</Preview>

Main.js

module.exports = {
  stories: ['../src/docs/*.mdx', '../src/**/*.stories.(js|mdx)'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-controls',
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-a11y/register',
    '@storybook/addon-viewport/register',
    {
      name: '@storybook/addon-docs',
      options: { configureJSX: true },
    },
  ],
};

Show code output

<MDXCreateElement
  mdxType="div"
  originalType="div"
>
  <MDXCreateElement
    mdxType="button"
    onClick={() => {}}
    originalType="button"
  >
    Open Alert with one action
  </MDXCreateElement>
  <MDXDefaultShortcode
    description="Description"
    title="Title"
    toggleVisible={function noRefCheck() {}}
  />
</MDXCreateElement>

System:
Environment Info:

System:
OS: macOS 10.15.5
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Binaries:
Node: 10.15.2 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 83.0.4103.116
Firefox: 74.0
Safari: 13.1.1
npmPackages:
@storybook/addon-a11y: ^6.0.0-rc.3 => 6.0.0-rc.3
@storybook/addon-actions: ^6.0.0-rc.3 => 6.0.0-rc.3
@storybook/addon-controls: ^6.0.0-beta.15 => 6.0.0-beta.15
@storybook/addon-docs: ^6.0.0-rc.3 => 6.0.0-rc.3
@storybook/addon-links: ^6.0.0-rc.3 => 6.0.0-rc.3
@storybook/addon-viewport: ^6.0.0-rc.3 => 6.0.0-rc.3
@storybook/addons: ^6.0.0-rc.3 => 6.0.0-rc.3
@storybook/preset-create-react-app: ^3.1.2 => 3.1.3
@storybook/react: ^6.0.0-rc.3 => 6.0.0-rc.3
@storybook/theming: ^6.0.0-rc.3 => 6.0.0-rc.3

[fgaleano]

I'm encountering the same issue using React and CSF stories.

The code shown in "Show Code" is the computed output of the component and not the content of the actual story. It shows props that have default values but were not actually passed to the component in the story code.

I haven't tried using addon-storysource in Canvas mode to confirm that plugin does pick up the story's content like it used in the past. But I was expecting the same behavior in Docs.

[shilman]

Yes will offer the ability to configure, hopefully this week

[robbertkl]

It seems to only occur when using an intermediate variable (including the template/bind pattern):

export const test = args => <Button {...args} />;

<Preview>
  <Story name="button">
    {test}
  </Story>
</Preview>

☝️ Does not work (shows MDXCreateElement)

<Preview>
  <Story name="button">
    {args => <Button {...args} />}
  </Story>
</Preview>

☝️ Does work (shows Button)

[yyynnn]

@robbertkl nah, not working

[robbertkl]

@yyynnn Thanks for your very helpful comment, are you a troll?

The 2nd example I gave _does_ work (shows the correct in the source), both on rc.3 (for which this issue was originally filed) and on rc.16(the current @next).

[yyynnn]

@robbertkl sorry
never meant to be

after some rm-rf magic + update to rc.16 it started working

someone should update the docs probably

[robbertkl]

Another thing I've noticed is decorators can cause this as well, but only component (and possibly story) decorators, not global ones:

When I have working source code display (by avoiding an intermediate variable), and add a decorator to <Meta decorators={[]} it shows my decorator's wrapping elements in the source, as MDXCreateElements. However, when I add the same decorator as a global one (in .storybook/preview.js with export const decorators) it does not show up in the source and it shows the correct story source code.

(running 6.0.13, the current @latest)

[shilman]

As a workaround you can set the docs.source.type story parameter to "code".

[estreske]

@shilman Thanks for workaround. Is it possible for you to provide a quick code snippet for the workaround in MDX?

[Luciferzhangyi]

@shilman Thanks for the work around. But seems not working for me. After I set docs.source.type to "code". It shows Template.bind({})

[git-arbitrarysystems]

@shilman Thanks for the work around. But seems not working for me. After I set docs.source.type to "code". It shows Template.bind({})

This is still an issue in version 6.1.0-alpha.3. However if i use {args => <TestComponent {...args} />} instead of Template.bind({}) it works correctly.

TestComponent.stories.mdx

import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs/blocks";
import { TestComponent } from "./TestComponent";

<Meta title="Generated/TestComponent" component={TestComponent} />

# TestComponent

This is the default description for a component in mdx format

<Canvas>
    <Story name="Primary" args={{ value: "primary" }}>
        {args => <TestComponent {...args} />}
    </Story>
</Canvas>

## Properties

<ArgsTable of={TestComponent} />

[molebox]

Another thing I've noticed is decorators can cause this as well, but only component (and possibly story) decorators, not global ones:

When I have working source code display (by avoiding an intermediate variable), and add a decorator to <Meta decorators={[]} it shows my decorator's wrapping elements in the source, as MDXCreateElements. However, when I add the same decorator as a global one (in .storybook/preview.js with export const decorators) it does not show up in the source and it shows the correct story source code.

(running 6.0.13, the current @latest)

Just wanted to drop in and say that removing the decorators from the components (per the answer quoted) worked for me

[keann]

The trick with an inline function mentioned by @robbertkl works only for the root element, while others provided via Args are still shown as MDXCreateElement:

Source

<Canvas>
  <Story
    name="SvgIcon"
    args={{
      children: <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />,
      color: 'lightgreen',
      size: 40,
    }}
  >
    {(args) => <SvgIcon {...args} />}
  </Story>
</Canvas>

Preview

<SvgIcon
  color="lightgreen"
  size={40}
>
  <MDXCreateElement
    d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"
    mdxType="path"
    originalType="path"
  />
</SvgIcon>

([email protected])

[Yakitrak]

Are there any updates to this or work arounds please?

[tregoning]

Hi, just highlighting the fact that it looks like this issue, incorrectly, has the label 'has workaround'.

[shilman]

@tregoning

As a workaround you can set the docs.source.type story parameter to "code".

[tregoning]

@shilman Thanks for your prompt reply. Apologies if I am incorrect. But the suggested work-around does not appear to work anymore. This is the case for me (MDX) but based on the comments mentioned bellow I am not the only one:

https://github.com/storybookjs/storybook/issues/11542#issuecomment-685276846
https://github.com/storybookjs/storybook/issues/11542#issuecomment-728193361

Thanks!

[apelsinapa]

@tregoning I'm setting up a new storybook rn with @storybook/[email protected]

MDX code preview suffers this issue, mentioned workaround does not work.