Internal vuetify methods error

Describe the bug I’m having an issue with 2 stories that don’t load the canvas preview. I’m using Storybook with vue and vuetify, I have some components working, but these 2 I can’t figure whats happenning.

1st error:

Cannot read property 'mobile' of undefined
TypeError: Cannot read property 'mobile' of undefined
    at VueComponent.isMobile (http://localhost:6006/vendors~main.e70571d3f211d58c4b4d.bundle.js:289475:23)
    at Watcher.get (http://localhost:6006/vendors~main.e70571d3f211d58c4b4d.bundle.js:243936:25)
    at Watcher.evaluate (http://localhost:6006/vendors~main.e70571d3f211d58c4b4d.bundle.js:244041:21)
    at VueComponent.computedGetter [as isMobile] (http://localhost:6006/vendors~main.e70571d3f211d58c4b4d.bundle.js:244291:17)
    at VueComponent.genHeaders (http://localhost:6006/vendors~main.e70571d3f211d58c4b4d.bundle.js:262289:24)
    at VueComponent.genDefaultScopedSlot (http://localhost:6006/vendors~main.e70571d3f211d58c4b4d.bundle.js:262621:178)
    at Object.normalized [as default] (http://localhost:6006/vendors~main.e70571d3f211d58c4b4d.bundle.js:242050:37)
    at Proxy.render (http://localhost:6006/vendors~main.e70571d3f211d58c4b4d.bundle.js:261032:66)
    at VueComponent.Vue._render (http://localhost:6006/vendors~main.e70571d3f211d58c4b4d.bundle.js:243005:22)
    at VueComponent.updateComponent (http://localhost:6006/vendors~main.e70571d3f211d58c4b4d.bundle.js:243523:21)

2nd error:

color.match is not a function
TypeError: color.match is not a function
    at isCssColor (http://localhost:6006/vendors~main.e70571d3f211d58c4b4d.bundle.js:293452:29)
    at VueComponent.setBackgroundColor (http://localhost:6006/vendors~main.e70571d3f211d58c4b4d.bundle.js:288363:78)
    at VueComponent.__cachedBackground (http://localhost:6006/vendors~main.e70571d3f211d58c4b4d.bundle.js:272617:46)
    at Watcher.get (http://localhost:6006/vendors~main.e70571d3f211d58c4b4d.bundle.js:243936:25)
    at Watcher.evaluate (http://localhost:6006/vendors~main.e70571d3f211d58c4b4d.bundle.js:244041:21)
    at Proxy.computedGetter (http://localhost:6006/vendors~main.e70571d3f211d58c4b4d.bundle.js:244291:17)
    at Proxy.render (http://localhost:6006/vendors~main.e70571d3f211d58c4b4d.bundle.js:272762:54)
    at VueComponent.Vue._render (http://localhost:6006/vendors~main.e70571d3f211d58c4b4d.bundle.js:243005:22)
    at VueComponent.updateComponent (http://localhost:6006/vendors~main.e70571d3f211d58c4b4d.bundle.js:243523:21)
    at Watcher.get (http://localhost:6006/vendors~main.e70571d3f211d58c4b4d.bundle.js:243936:25)

Expected behavior Canvas preview load correctly.

System System: OS: Linux 5.0 Linux Mint 19.3 (Tricia) CPU: (8) x64 Intel® Core™ i5-8250U CPU @ 1.60GHz Binaries: Node: 12.9.0 - ~/.nvm/versions/node/v12.9.0/bin/node Yarn: 1.22.5 - /usr/bin/yarn npm: 6.10.2 - ~/.nvm/versions/node/v12.9.0/bin/npm Browsers: Chrome: 87.0.4280.88 Firefox: 82.0.3 npmPackages: @storybook/addon-actions: ^6.1.11 => 6.1.11 @storybook/addon-essentials: ^6.1.11 => 6.1.11 @storybook/addon-links: ^6.1.11 => 6.1.11 @storybook/vue: ^6.1.11 => 6.1.11

[nurkenn-keda]

Hi @kauanschaeffer , I’ve found a workaround for this issue

Basically you have to pass in your vuetify instance to your story templates. Example (in .stories.js) below:

import vuetify from '@/plugins/vuetify'

const Template = (args, { argTypes }) => ({
  vuetify, // <- Insert vuetify here
  props: Object.keys(argTypes),
  components: { MyComponent},
  template: `
    <MyComponent
      v-bind="$props"
      />
  `
})

I’ve also answered your SO question. Cheers

[KaelWD]

This is because of the new Vue instance @storybook/addon-docs creates: https://github.com/storybookjs/storybook/blob/fdf716713f93421c1bf722bc436285888cb971aa/addons/docs/src/frameworks/vue/sourceDecorator.ts#L39

If there’s some way to get the actual root instance where decorators are applied, passing that through with new Vue({ parent: root }) should fix this bug.