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

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® Core™ 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

[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)

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