vue-docgen-api cannot parse component with template functional

Current behavior

When launch yarn styleguide command, component functional (<template functional></template>) cause error :

Warning: vue-docgen-api cannot parse src/components/Button/Button.vue: SyntaxError: Unexpected token, expected ";"

To reproduce

I have the vue-styleguidist@3.11.4

Expected behavior

I would like template functional is parse by vue-docgen-api

Thank you very much by advance

[schjetne]

This still seems to be an issue with certain <template functional> Vue components. I’m having the same problem. Here’s the entire component that fails:

<template functional>
  <div
    :class="{
      [$style.root]: true,
      [$style.error]: props.error,
      [$style.focused]: props.focused,
      [$style.hasIcon]: props.icon,
      [$style.disabled]: props.disabled
    }"
    >
    <label
      :class="{
        [$style.label]: true,
        [$style.labelFloating]: props.focused || (typeof props.value !== 'undefined' && props.value !== ''),
        [$style.labelAlwaysFloating]: props.labelAlwaysFloating || props.prefix || props.disabled,
      }"
      :for="props.id"
      >{{ props.label }}</label>
    <div
      :class="$style.inputGroup"
      >
      <SvgIcon
        v-if="props.icon"
        :name="props.icon"
        :class="$style.icon"
        />
      <div
        v-if="props.prefix"
        :class="$style.prefix"
        >{{ props.prefix }}</div>
      <div
        :class="$style.input"
        ><slot/></div>
    </div>
    <div
      :class="$style.errorMessage"
      >{{ props.errorMessage }}</div>
  </div>
</template>

<script>
/**
 * Wrapper for input elements
 */
export default {
  name: 'InputWrapper',
  status: 'ready',
  release: '0.0.1',
  props: {
    /**
     * Should display error?
     */
    error: {
      type: Boolean,
      default: false
    },
    /**
     * True if input label should always be "up there"
     */
    labelAlwaysFloating: {
      type: Boolean,
      default: false
    },
    /**
     * String for label text
     */
    label: {
      type: String,
      required: true
    },
    /**
     * Should the input be focused?
     */
    focused: {
      type: Boolean,
      default: false
    },
    /**
     * Should the input be disabled?
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * Prefix string for input field
     */
    prefix: String,
    /**
     * Prefix icon for input field
     */
    icon: {
      type: String,
      default: ''
    },
    /**
     * String with relevant error message
     */
    errorMessage: {
      type: String,
      default: ''
    },
    /**
     * Input value
     */
    value: {
      required: true
    },
    /**
     * Input ID
     */
    id: {
      type: [String, Number],
      required: true
    },
  },
}
</script>

<style lang="scss" module>
/* Removed styles as they are irrelevant */
</style>

<docs>
  `` `jsx
  <input-wrapper label="Label" value="–" id="sdf">
    …
  </input-wrapper>
  `` `
</docs>

This happens when trying to include functional components in Vue Design System.

[schjetne]

Wonderful! Thank you!