storybook: 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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 1
Comments: 21 (5 by maintainers)

Most upvoted comments

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

+11

nurkenn-keda on Jan 26, 2021

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.

KaelWD on Feb 23, 2021

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

It does work as a workaround… Waiting for a final fix to this.

K-Schaeffer-LOG on Jan 26, 2021

@hereiscasio Hmm… what’s your problem actually? Injecting vuetify to component options (or via a decorator) is required (we can’t inject it into root options though). If your problem is “an error happens with a decorator that injects vuetify, but works with the local injection workaround”, it seems the same as this, and I’m afraid to say I can’t help, sorry (precondition obscure and probably @storybook/vue things). Maybe other Storybook for Vue team members could have an idea for that.

pocka on Mar 30, 2021

I had the same problem. Follows from the error: Cannot read property 'dark' of undefined TypeError: Cannot read property 'dark' of undefined at VueComponent.isDark (http://localhost:6006/vendors-main.le4de5d77f20337b076f.bundle.js:250463:34) at Watcher.get (http://localhost:6006/vendors-main.le4de5d77120337b076f.bundle.js:242517:25) at Watcher.evaluate (http://localhost:6006/vendors-main.le4de5d77f20337b076f.bundle.js:242622:21) at VueComponent.computedGetter (as isDark] (http://localhost:6006/vendors-main.le4de5d77120337b076f.bundle.js:242872:17) at VueComponent. themeClasses (http://localhost:6006/vendors--main.le4de5d77f20337b076f.bundle.js:289510:29) at Watcher.get (http://localhost:6006/vendors-main.le4de5d77120337b076f.bundle.js:242517:25) at Watcher.evaluate (http://localhost:6006/vendors-main.le4de5d77f20337be76f.bundle.js:242622:21)

matheuzsrlog on Jan 7, 2021