storybook: Addon-docs: Simplest MDX not working @vue/cli app

If you are not actually using JSX in Vue, the @vue/app preset makes it easy to disable as a workaround:

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        /* Disabled due to clash between core-js versions in Storybook / Vue CLI */
        useBuiltIns: false,
        /* Disabled due to clash with Storybook MDX */
        jsx: false
      }
    ]
  ]
}

So, I worked on this yesterday and debugged the following.

In default Vue App serving storybook with the following in main.js

Default

  addons: [
    {
      name: '@storybook/addon-docs',
    }
  ]

results in the following error while viewing docs

ReferenceError: h is not defined

will give the following webpack config

/\.(stories|story).mdx$/
{
  "test": {},
  "use": [
    {
      "loader": "babel-loader",
      "options": {
        "cacheDirectory": "/Users/pksunkara/Coding/storybooks/docs/node_modules/.cache/storybook",
        "presets": [
          [
            "/Users/pksunkara/Coding/storybooks/docs/node_modules/@babel/preset-env/lib/index.js",
            {
              "shippedProposals": true,
              "useBuiltIns": "usage",
              "corejs": "3"
            }
          ]
        ],
        "plugins": [
          "/Users/pksunkara/Coding/storybooks/docs/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js",
          "/Users/pksunkara/Coding/storybooks/docs/node_modules/@babel/plugin-proposal-class-properties/lib/index.js",
          "/Users/pksunkara/Coding/storybooks/docs/node_modules/@babel/plugin-syntax-dynamic-import/lib/index.js",
          [
            "/Users/pksunkara/Coding/storybooks/docs/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.js",
            {
              "sourceMap": true,
              "autoLabel": true
            }
          ],
          "/Users/pksunkara/Coding/storybooks/docs/node_modules/babel-plugin-macros/dist/index.js",
          "@babel/plugin-transform-react-jsx"
        ]
      }
    },
    {
      "loader": "@mdx-js/loader",
      "options": {
        "compilers": [
          null
        ]
      }
    }
  ]
}

With Options

  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        babelOptions: {
          presets: [
            [
              '@vue/cli-plugin-babel/preset',
              {
                jsx: false
              }
            ]
          ]
        }
      }
    }
  ]

works perfectly showing the docs with the following webpack config

/\.(stories|story).mdx$/
{
  "test": {},
  "use": [
    {
      "loader": "babel-loader",
      "options": {
        "presets": [
          [
            "@vue/cli-plugin-babel/preset",
            {
              "jsx": false
            }
          ]
        ],
        "plugins": [
          "@babel/plugin-transform-react-jsx"
        ]
      }
    },
    {
      "loader": "@mdx-js/loader",
      "options": {
        "compilers": [
          null
        ]
      }
    }
  ]
}

/cc @shilman @Aaron-Pool

So, the first question we can ask is, why is by default stories not taking babel config from babel.config.js. If it needs some stuff to work (babel-emotion), then why is it working correctly even though we removed them when passing babelOptions.

I did that in my original request. Repo is here: https://github.com/margielm/sb-test. And the MDX file is here: https://github.com/margielm/sb-test/blob/master/stories/hello.stories.mdx . If we want to spread the usage of Storybook for maximum extend, and we do because it is wonderful tool 😃, we need to make it a as simple as possible to setup for applications created with CLI. That applies not only to React or Vue, but also Angular, and others.

@margielm my apologies. I’m what some people would call “an idiot” 😬

I’ll check it out ASAP.

@AJB99 is ui-button declared globally? If not, you need to add it to your story component definition, like:

<Story name="ui-button-story">
	{{
                components: { uiButton },
		template : '<ui-button>Click Me</ui-button>',
	}}
</Story>

The component attribute of the Meta tag is used by storybook to generate documentation automatically, whereas the contents of the Story block is just a Vue component definition that knows nothing about the rest of the file.

I’m using the latest version of vue-cli-plugin-storybook in multiple projects and it works fine with docs.

As a temporary work-around, I was able to tweak the Storybook webpack config to get MDX stories working for Vue components without having to disable JSX. Many thanks to @Aaron-Pool for helping me debug. I set up an example repo here:

https://github.com/trevoreyre/storybook-mdx-vue-example

@raihle thanks! That was an oversight on my part, and I definitely should have mentioned that. I use JSX pretty commonly, and I tend to forget that a large portion (probably even the majority) of the Vue user base doesn’t need that part of the Babel preset at all.

@LeBenLeBen Try return React.createElement(Story)?

@raihle this is great intel, thanks for the tip!

So, it looks like this is indeed an issue with competing jsx loaders. The Vue jsx plugins are processing nthe MDX before the react plugin gets a chance to. And Vue jsx isn’t valid in MDX content format yet. I’ll try to chat with @shilman about the best way to get this fixed.

@alexkcollier, you have a lot of duplicate things in your Babel config, @vue/app is a super set of @babel/preset-env. So you should get rid of preset-env. Additionally, the @vue/app preset contains the @vue/jsx preset, so you should be able to remove the transform-vue-jsx plugin as well.

And, like I said to @margielm, make sure that no Vue loaders are running on mdx files. The only loaders running on mdx file types should be provided by the docs preset. If you let the Vue preset run on mdx files, the react and Vue jsx plugins will interfere with one another.