Storybook Docs Vue: ReferenceError: "h is not defined"

Describe the bug After upgrading Storybook to 5.3.0-rc.8 in my Vue application and try to migrate my stories to only MDX, the ‘Docs’ tab returns ReferenceError: "h is not defined"

To Reproduce Steps to reproduce the behavior:

1. create an application using Vue;
2. add @storybook/addon-docs@5.3.0-rc.8
3. adjust main.js to load mdx files

stories: ['../src/components/**/*.stories.(js|mdx)'],

1. Add MDX file: (any vue component) z-icon.stories.mdx

import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
import { text, withKnobs } from '@storybook/addon-knobs';
import ZIcon from '../z-icon';

<Meta
  title='Icon'
  component={ZIcon}
  decorators={[withKnobs]}
/>

<Story name='normal'>
  {{
    components: {ZIcon},
    template: `<ZIcon :icon="['fab', 'cc-visa']" icon-size="larger"/>`,
  }}
</Story>

## Props

<Props of={ZIcon} />

1. run npm run storybook;
2. go to ‘Docs’ tab;
3. see the error in console.

Expected behavior Docs works with MDX fully support in Vue.

Screenshots

Code snippets z-icon.stories.mdx generated when Storybook is running:

import React from 'react'
import { mdx } from '@mdx-js/react'

/* @jsx mdx */
import { assertIsFn, AddContext } from "@storybook/addon-docs/blocks";

import { Meta, Story, Props } from '@storybook/addon-docs/blocks';
import { text, withKnobs } from '@storybook/addon-knobs';
import ZIcon from '../z-icon';

const makeShortcode = name => function MDXDefaultShortcode(props) {
  console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
  return <div {...props}/>
};

const layoutProps = {
  
};
const MDXLayout = "wrapper"
function MDXContent({
  components,
  ...props
}) {
  return <MDXLayout {...layoutProps} {...props} components={components} mdxType="MDXLayout">

    <Meta title='Icon' component={ZIcon} decorators={[withKnobs]} mdxType="Meta" />
    <Story name='normal' mdxType="Story">
  {{
        components: {
          ZIcon
        },
        template: `<ZIcon :icon="['fab', 'cc-visa']" icon-size="larger"/>`
      }}
    </Story>
    <h2 {...{
      "id": "props"
    }}>{`Props`}</h2>
    <Props of={ZIcon} mdxType="Props" />
    </MDXLayout>;
}

;
MDXContent.isMDXComponent = true;

export const normal = () => (
        {
  components: {
    ZIcon
  },
  template: `<ZIcon :icon="['fab', 'cc-visa']" icon-size="larger"/>`
}
      );
normal.story = {};
normal.story.name = 'normal';
normal.story.parameters = { mdxSource: '{\n  components: {\n    ZIcon\n  },\n  template: `<ZIcon :icon=\"[\'fab\', \'cc-visa\']\" icon-size=\"larger\"/>`\n}' };

const componentMeta = { title: 'Icon', decorators: [withKnobs], includeStories: ["normal"],  };

const mdxStoryNameToKey = {"normal":"normal"};

componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
  ...(componentMeta.parameters.docs || {}),
  page: () => <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentMeta={componentMeta}><MDXContent /></AddContext>,
};

export default componentMeta;

System:

System:
    OS: macOS 10.15
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.19.0 - /usr/local/bin/yarn
    npm: 6.12.0 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Browsers:
    Chrome: 79.0.3945.88
    Firefox: 71.0
    Safari: 13.0.2
  npmPackages:
    @storybook/addon-a11y: ^5.3.0-rc.8 => 5.3.0-rc.8
    @storybook/addon-actions: ^5.3.0-rc.8 => 5.3.0-rc.8
    @storybook/addon-docs: ^5.3.0-rc.8 => 5.3.0-rc.8
    @storybook/addon-knobs: ^5.3.0-rc.8 => 5.3.0-rc.8
    @storybook/addon-links: ^5.3.0-rc.8 => 5.3.0-rc.8
    @storybook/addon-storysource: ^5.3.0-rc.8 => 5.3.0-rc.8
    @storybook/addon-viewport: ^5.2.8 => 5.2.8
    @storybook/addons: ^5.3.0-rc.8 => 5.3.0-rc.8
    @storybook/cli: ^5.3.0-rc.8 => 5.3.0-rc.8
    @storybook/vue: ^5.3.0-rc.8 => 5.3.0-rc.8
  npmGlobalPackages:
    @storybook/cli: 5.3.0-rc.8

Additional context Add any other context about the problem here.

[danilovaz]

@Aaron-Pool You are absolutely right. In some of my tests I must have forgotten to set the Components property.

I really appreciate the support and patience from both of you.

Edited:

Now it’s works 🎉

[Aaron-Pool]

@danilovaz Yeah, so the problem here is that the content of each <Story> tag in MDX is itself a component. So, if you want to use a component locally, rather than globally registered, you need to register it in the story component with components: { ZCaption } (assuming you have imported the component in the file.

Or have you already tried that?