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

Question

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

Closed this issue 4 years ago · 29 comments

Describe the bug
After upgrading to storybook@5.2 and adding MDX support to a Vue application created with @Vue/cli - the doc tab is is throwing following error:

h is not defined
ReferenceError: h is not defined
    at container (http://localhost:6006/main.831d3d75a097f0e9391d.bundle.js:667:5)
    at renderWithHooks (http://localhost:6006/vendors~main.831d3d75a097f0e9391d.bundle.js:83540:18)
    at mountIndeterminateComponent (http://localhost:6006/vendors~main.831d3d75a097f0e9391d.bundle.js:85774:13)
    at beginWork$1 (http://localhost:6006/vendors~main.831d3d75a097f0e9391d.bundle.js:86918:16)
    at HTMLUnknownElement.callCallback (http://localhost:6006/vendors~main.831d3d75a097f0e9391d.bundle.js:68779:14)
    at Object.invokeGuardedCallbackDev (http://localhost:6006/vendors~main.831d3d75a097f0e9391d.bundle.js:68829:16)
    at invokeGuardedCallback (http://localhost:6006/vendors~main.831d3d75a097f0e9391d.bundle.js:68886:31)
    at beginWork$$1 (http://localhost:6006/vendors~main.831d3d75a097f0e9391d.bundle.js:91649:7)
    at performUnitOfWork (http://localhost:6006/vendors~main.831d3d75a097f0e9391d.bundle.js:90640:12)
    at workLoopSync (http://localhost:6006/vendors~main.831d3d75a097f0e9391d.bundle.js:90617:22)

To Reproduce
Steps to reproduce the behavior:

create an application using @vue/cli
initalize storybook with
add @storybook/addon-docs -> yarn add @storybook/addon-docs@5.2 --dev
register addon in addons.js
register addon-docs presets in presets.js
adjust config.js to load mdx files
Add simple MDX file:

import { Story, Meta } from '@storybook/addon-docs/blocks';

<Meta title="Addon|Docs" />

<Story name="test">
  {{
    template: '<div>Hello World</div>',
  }}
</Story>

start storybook
click on Addon|Docs/test story and go to Docs tab
see the error

Expected behavior
To see the documentation page

Screenshots

Code snippets
https://github.com/margielm/sb-test
https://github.com/margielm/sb-test/blob/master/stories/hello.stories.mdx

System:
System:
OS: macOS 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Binaries:
Node: 12.10.0 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.11.3 - /usr/local/bin/npm
Browsers:
Chrome: 76.0.3809.132
Firefox: 67.0
Safari: 12.1.2
npmPackages:
@storybook/addon-actions: ^5.2.0 => 5.2.0
@storybook/addon-docs: 5.2.0 => 5.2.0
@storybook/addon-links: ^5.2.0 => 5.2.0
@storybook/addons: ^5.2.0 => 5.2.0
@storybook/vue: ^5.2.0 => 5.2.0

Answer 1 · 2019-09-16T22:26:55.000Z

@Aaron-Pool any idea what's going on here?

Answer 2 · 2019-09-17T04:00:02.000Z

Looks like the Vue babel preset is trying to run on .mdx files, and it's trying to parse the jsx but it can't find a Vue create element method (a.k.a, h).

@margielm, make sure that whatever Babel config is including the Vue preset isn't running on MDX files. The docs preset should be sufficient to handle transpiring the MDX files.

If you could post your vue.config.js file I could probably be more specific.

Answer 3 · 2019-09-17T18:54:45.000Z

I'm experiencing the same issue.

vue.config.js

const sharedConf = require('./config/shared-webpack-conf')

module.exports = {
  productionSourceMap: false,
  lintOnSave: true,
  pluginOptions: {
    stylelint: {
      formatter: () => require('prettier'),
    },
    'style-resources-loader': sharedConf.styleResourcesLoaderOptions,
  },
  css: {
    extract: true,
  },
  configureWebpack: {
    resolve: {
      alias: sharedConf.aliases,
    },
  },
}

babel.config.js

module.exports = (api) => {
  api.cache(true)

  return {
    presets: ['@vue/app', '@babel/preset-env'],
    plugins: ['transform-vue-jsx', '@babel/plugin-transform-runtime'],
  }
}

Answer 4 · 2019-09-17T20:33:17.000Z

@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.

Answer 5 · 2019-09-17T20:34:09.000Z

If either of you are still having problems, and can setup a minimal repo that I can debug with your configuration, I would be happy to!

Answer 6 · 2019-09-17T20:46:49.000Z

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.

Answer 7 · 2019-09-17T21:19:52.000Z

@margielm my apologies. I'm what some people would call "an idiot" 😬

I'll check it out ASAP.

Answer 8 · 2019-09-17T21:21:22.000Z

No worries, it happens 😄 I am super glad that it is moving forward. Thank you!

Answer 9 · 2019-09-18T12:20:31.000Z

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.

Answer 10 · 2019-09-23T08:14:32.000Z

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
      }
    ]
  ]
}

Answer 11 · 2019-09-23T09:38:30.000Z

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

Answer 12 · 2019-09-23T11:54:36.000Z

@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.

Answer 13 · 2019-10-17T06:55:26.000Z

Unfortunately, I am the one use jsx in vue 😭

Answer 14 · 2019-10-17T12:32:50.000Z

@jeffwcx I use JSX in my storybook project as well, and we're definitely set on getting it working. Stay tuned.

Answer 15 · 2019-10-19T09:35:27.000Z

I had the same error, so I tried to disable JSX in the Vue babel preset, but then it's not able to parse the JSX in my Storybook config file to setup the inline rendering:

prepareForInline: storyFn => {
    const Story = toReact(storyFn());
    return <Story />;
},

It throws:

ERROR in ./config/storybook/config.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: ./config/storybook/config.js: Unexpected token (26:13)

  24 |     prepareForInline: storyFn => {
  25 |       const Story = toReact(storyFn());
> 26 |       return <Story />;
     |              ^

The Docs preset cause other issues with Prettier, that's why I went for the manual setup instead of the Docs preset. Any idea what's missing for Storybook to handle JSX in the config file? Or how I could rewrite the statement above without JSX at all?

Answer 16 · 2019-10-19T12:33:53.000Z

@LeBenLeBen Try return React.createElement(Story)?

Answer 17 · 2019-10-19T14:38:33.000Z

@shilman Perfect, it works fine, thank you!

Answer 18 · 2020-01-02T07:20:19.000Z

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

Answer 19 · 2020-01-03T11:05:34.000Z

@trevoreyre This is a great temp work-around. It does seem however, for me at least, to break Jest unit tests as without a babel.config.js file with preset @vue/app in for Jest to pickup it errors when running the tests with Unexpected token {. Jest doesn't pick up the @vue/app preset specified in main.js.

Just wondering if anyone brighter than me, not hard, had any suggestions?

Answer 20 · 2020-01-03T17:05:34.000Z

As a point for consideration, I would greatly appreciate if the working setup/config could be packaged up as a vue cli plugin (with perhaps a pre-made .stories file to go along with the default HelloWorld.vue component)

Answer 21 · 2020-01-04T20:54:31.000Z

@andywd7 I think you can configure environment specific settings in your Babel config. If you confine the changes in the work around to environments that aren't "test", I think that may work?

Answer 22 · 2020-01-15T15:26:24.000Z

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.

Answer 23 · 2020-02-17T03:06:52.000Z

Has anyone found a reliable fix for this?

I've managed to get the Docs tab to render without error, but it doesn't actually render my component, just the text that would be the label for the button.

ui-button.vue

<template lang="pug">

	button
		slot

</template>



<script>

	let $cmp = {
		name : 'ui-button',
		props : {
			label : { type : String, default : 'UI Button' },
			options : {
				type : Object,
				required : false,
				default() {
					return {
						one : 1,
						two : 2,
						three : 'three'
					}
				}
			}
		}
	}

	export default $cmp

</script>



<style lang="stylus" scoped>

	button
		width 100%
		height 40px

</style>

babel.config.js

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
      }
    ]
  ]
}

ui-button.stories.mdx

import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
import uiButton from './ui-button.vue';

<Meta title="MDX/ui-button" component={ uiButton } />



# ui-button

With `MDX` we can define a story for `ui-button` right in the middle of our
markdown documentation.

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

Docs tab HTML
(Displays the text only, not a button).

<div id="root">
  <ui-button>Click Me</ui-button>
</div>

Any help would be much appreciated. We'd love to use Storybook for our project, but really do require mdx files to work properly.

Answer 24 · 2020-02-17T07:20:42.000Z

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

Answer 25 · 2020-02-17T07:58:45.000Z

@LeBenLeBen With docs, or with mdx files?

Also, could you please share your config so we can see if there's any diff between our configs and yours?

If you've got it working, then I'm sure a lot of people would love to take a look at how.

Also, can you provide the semver of what you mean by "latest version of the vue-cli-plugin-storybook" so we can all compare that as well.

Answer 26 · 2020-02-17T13:52:25.000Z

@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.

Answer 27 · 2020-02-17T17:01:52.000Z

You can check out this repo that has a Vue CLI using the plugin for Storybook (under packages/chusho). It doesn't have any mdx file right now but I created one at some point and it worked fine.

In any case I think @Aaron-Pool is right and you should ensure your component is available for usage first.

Answer 28 · 2020-06-16T06:19:38.000Z

Crikey!! 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.

Closing this issue. Please re-open if you think there's still more to do.

Answer 29 · 2020-07-10T14:16:26.000Z

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-rc.2 containing PR #11495 that references this issue. Upgrade today to try it out!

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