Storybook: Vue/MDX migration to v6.0 - h is not defined

[ksaturnius]

Describe the bug
I've been incrementally working through the v6 beta versions to try and solve an issue I raised originally in #10817. As of beta.23 I have a working, fully migrated version of our Vue.js Storybook, except for the MDX docs functionality (which had been working as of 5.3.18). Now, when I try to access any MDX docs, I get the following error:

type.stories.mdx:104 Uncaught ReferenceError: h is not defined
    at page (type.stories.mdx:104)
    at renderWithHooks (react-dom.development.js:2546)
    at mountIndeterminateComponent (react-dom.development.js:2831)
    at beginWork (react-dom.development.js:3049)
    at HTMLUnknownElement.callCallback (react-dom.development.js:70)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:90)
    at invokeGuardedCallback (react-dom.development.js:105)
    at beginWork$1 (react-dom.development.js:3934)
    at performUnitOfWork (react-dom.development.js:3734)
    at workLoopSync (react-dom.development.js:3730)

react-dom.development.js:3239 The above error occurred in the <page> component:
    in page
    in div (created by Context.Consumer)
    in Styled(div) (created by DocsContainer)
    in div (created by Context.Consumer)
    in Styled(div) (created by DocsContainer)
    in MDXProvider (created by DocsContainer)
    in ThemeProvider (created by DocsContainer)
    in DocsContainer

In 5.3.18, I had been using the workaround here to configure addon-docs to use a tweaked version of the babel config. However, this workaround is no longer working in v6. I have also tried upgrading to @vue/babel-preset-jsx as per the vue-kitchen=sink example with no luck.

To Reproduce
I've created an example repo here: https://github.com/ksaturnius/sb6-vue-jsx-issue

This is based off of the following steps:

1. Run npx -p @storybook/cli sb init --type vue
2. Add peer dependencies and @storybook/addon-docs
3. Update all @storybook dependencies to 6.0.0-beta.23
4. Update babel config to use @vue/babel-preset-jsx

System:
Environment Info:

  System:
    OS: macOS 10.15.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.17.0 - /usr/local/opt/node@10/bin/node
    Yarn: 1.22.4 - ~/.yarn/bin/yarn
    npm: 6.11.3 - /usr/local/opt/node@10/bin/npm
  Browsers:
    Chrome: 83.0.4103.97
    Firefox: 77.0
    Safari: 13.1.1
  npmPackages:
    @storybook/addon-actions: ^6.0.0-beta.23 => 6.0.0-beta.23
    @storybook/addon-docs: ^6.0.0-beta.23 => 6.0.0-beta.23
    @storybook/addon-links: ^6.0.0-beta.23 => 6.0.0-beta.23
    @storybook/addons: ^6.0.0-beta.23 => 6.0.0-beta.23
    @storybook/vue: ^6.0.0-beta.23 => 6.0.0-beta.23

[shilman]

cc @Aaron-Pool @graup

[Aaron-Pool]

This is an issue with the Vue jsx preset attempting to process and mdx file, I believe. There's a work around though, you should read through this thread, starting with the linked comment: https://github.com/storybookjs/vue-cli-plugin-storybook/issues/73#issuecomment-573915070

[ksaturnius]

@Aaron-Pool thank you for your help. I was able to get the MDX docs working properly based on your babel.config.js. It does not seem to work however with @vue/babel-preset-jsx, so I'm not sure if having that in vue-kitchen-sink is the best idea currently.

One thing I did notice though, was that with the above babel.config.js setup, the default Vue JSX story example starts failing:

export const Jsx = () => ({
  components: { MyButton },
  render(h) {
    return <my-button onClick={this.action}>With JSX</my-button>;
  },
  methods: { action: linkTo('clicked') },
});

I don't currently use JSX in my stories, so this isn't a big problem for me personally, but it seems like an issue worth raising for discussion/visibility.

I've also updated my previously mentioned repo with working examples in case anyone needs it as a reference in the future: https://github.com/ksaturnius/sb6-vue-jsx-issue

[Aaron-Pool]

@ksaturnius if I recall correctly, if you continue reading through that thread, you'll see that we refined the work around to work with everything except Vue jsx stories _inside of_ mdx files.

[pumano]

I got this error too and fix with babel.config.js:

module.exports = {
  presets: [["@vue/cli-plugin-babel/preset", {
    jsx: false
  }]]
};

Also I found something like this:

module.exports = {
  stories: ['../src/**/*.stories.(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-actions',
    {
      name: '@storybook/addon-docs',
      options: {
        babelOptions: {
          presets: [
            [
              '@vue/cli-plugin-babel/preset'
            ]
          ]
        }
      }
    },
    '@storybook/addon-knobs',
    '@storybook/addon-links',
    '@storybook/addon-notes'
  ]
}

but @storybook/addon-docs not override babel config js

[ksaturnius]

@Aaron-Pool got it, thank you 🙏

I've updated my example repo now, so everything is working _except_ JSX in MDX as you mentioned. https://github.com/ksaturnius/sb6-vue-jsx-issue

[shilman]

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.29 containing PR #11185 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.