Storybook: Addon-docs - HTML comment in Vue template gives warning

[mattgreenfield]

Describe the bug
I am using addon-docs.
Adding a HTML comment to my Vue component template, gives me the following warning in when running storybook:

WARNING in ./src/components/Button/Button.vue
Module Warning (from ./node_modules/vue-docgen-loader/lib/index.js):
[vue-docgen-loader] failed to parse the component file with docgen-api: Cannot read property 'content' of undefined

To Reproduce
Steps to reproduce the behavior:

1. Clone https://github.com/mattgreenfield/storybook-vue-sandbox
2. Run npm i && npm run storybook:serve
3. See the warning
4. Remove the HTML comment here to remove the warning https://github.com/mattgreenfield/storybook-vue-sandbox/blob/master/src/components/Button/Button.vue#L3

Expected behavior
No warning. I'm not sure if the HTML comment should appear in storybook but I didn't expect it to.

System:
System:
OS: macOS Mojave 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-7600 CPU @ 3.50GHz
Binaries:
Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
npm: 6.13.1 - ~/.nvm/versions/node/v10.15.0/bin/npm
Browsers:
Chrome: 80.0.3987.87
Firefox: 71.0
Safari: 13.0.5
npmPackages:
@storybook/addon-docs: ^5.3.12 => 5.3.12
@storybook/vue: ^5.3.12 => 5.3.12
npmGlobalPackages:
@storybook/cli: 5.3.12

[shilman]

@pocka is this something you can look at? 🙏

[pocka]

The error appears when you put an HTML comment before <slot/> tag and it has no @slot tag inside. I filed an issue on the vue-docgen-api side.

https://github.com/vue-styleguidist/vue-styleguidist/issues/749

Workarounds

You could suppress the error by 1) moving the comment line, or 2) adding @slot tag. The later will add the comment itself to the slots table in docs, as a slot description.

<template>
  <!-- OK -->
  <div>
    <!-- ERROR -->
    <slot/>
    <!-- OK -->
  </div>
</template>

<template>
  <div>
    <!-- @slot This would appear as a slot description -->
    <slot/>
  </div>
</template>

[shilman]

Thanks so much for the quick turnaround on this @pocka. You're amazing! 💯

[mattgreenfield]

Thanks @pocka that has solved the mystery!
I've noticed I get a similar warning with multi line comments and @slot

 <!-- @slot
     Hello
 -->

gives me [vue-docgen-loader] failed to parse the component file with docgen-api: doclets.tags.filter(...)[0].content.trim is not a function

[pocka]

[email protected], which includes the patch, has been released. I've not tried yet but I think it also solves the multi line comment problem too.
If you still have an error on parsing with it, please open an issue at vue-styleguidist repo (which contains vue-docgen-api).