Vue-styleguidist: Error when trying to use router in example

[simonwjackson]

I have an component example that i would like to use vue-router to demonstrate how to use it with vue-router.

However, it fails to load, and I get a cross origin error.. ?

<docs>
const VueRouter = require( 'vue-router')

const Foo = { template: '<div>foo</div>' }
const routes = [
  { path: '/', component: Foo },
]

const router = new VueRouter({
  routes
})

new Vue({
  template: `<m-navigation />`,
  router
})
</docs>

Browser

Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
    in Preview (created by Playground)
    in div (created by PlaygroundRenderer)
    in div (created by PlaygroundRenderer)
    in PlaygroundRenderer (created by Styled(Playground))
    in Styled(Playground) (created by Playground)
    in Playground (created by Examples)
    in article (created by ExamplesRenderer)
    in ExamplesRenderer (created by Styled(Examples))
    in Styled(Examples) (created by Examples)
    in Examples (created by ReactComponent)
    in div (created by ReactComponentRenderer)
    in ReactComponentRenderer (created by Styled(ReactComponent))
    in Styled(ReactComponent) (created by ReactComponent)
    in ReactComponent (created by Components)
    in div (created by ComponentsRenderer)
    in ComponentsRenderer (created by Components)
    in Components (created by Section)
    in section (created by SectionRenderer)
    in SectionRenderer (created by Styled(Section))
    in Styled(Section) (created by Section)
    in Section (created by Sections)
    in section (created by SectionsRenderer)
    in SectionsRenderer (created by Styled(Sections))
    in Styled(Sections) (created by Sections)
    in Sections (created by StyleGuide)
    in main (created by StyleGuideRenderer)
    in div (created by StyleGuideRenderer)
    in StyleGuideRenderer (created by Styled(StyleGuide))
    in Styled(StyleGuide) (created by StyleGuide)
    in StyleGuide
This may be due to an error in a component you are overriding, or a bug in React Styleguidist.

If you believe this is a bug, please submit an issue.

Console

main.bundle.js:17648 Warning: Failed prop type: Invalid prop info.componentStack of type string
main.bundle.js:125795 Warning: Can only update a mounted or mounting component. This usually
means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the Playground component.
```

[rafaesc]

Hi @simonwjackson,

vue-styleguidist is designed to document dummy components if you install vue-router would generate problems with the pathname of vue-styleguidist.

Would to create a fake vue-router be a solution for you?

[MiguelSavignano]

Hi @rafaesc

I agree with vue-styleguidist is designed to document dummy components.

I have similar problem as @simonwjackson I try to create a component Footer and I relay want to documented with vue-styleguidist.

My footer component recive some links as props.

<template>
  <footer class="footer">
    <ul class="menu">
      <li class="item" v-for="(link, index) in links" :key="index">
        <router-link :to="link.path">{{item.label}}</router-link>
      </li>
    </ul>
  </footer>
</template>
<script>
export default {
  name: 'Footer',
  props: {
    links: [ ]
  }
}
</script>

This component fails and does not allow me to documented it with vue-styleguidist

But I found one solution using global require

// styleguide.global.requires.js
import Vue from 'vue'
Vue.component('RouterLink', {
  template: `<a><slot></slot></a>`
})

[marshallswain]

Just in case anybody could benefit from this, here's a mocked router-link component that allows you to customize the tag:

Vue.component('RouterLink', {
  props: {
    tag: { type: String, default: 'a' }
  },
  render(createElement) {
    return createElement(this.tag, {}, this.$slots.default)
  }
})