Vuetify Storybook remapInternalIcon issue

0
votes

Using Vuetify 2 and Storybook 6 (source https://github.com/lydonchandra/vuetify2storybook6 )

The component renders fine, but keep getting this error TypeError because vm.$vuetify.icons is undefined, when rendering component for first time.

Not sure which storybook-vuetify initialization bridge did I miss ?

TypeError: Cannot read property 'component' of undefined
at remapInternalIcon (vuetify.js:44048)
at VueComponent.getIcon (vuetify.js:16881)
at Proxy.render (vuetify.js:17009)
at VueComponent.Vue._render (vue.esm.js:3557)
at VueComponent.updateComponent (vue.esm.js:4075)
at Watcher.get (vue.esm.js:4488)
at new Watcher (vue.esm.js:4477)



function remapInternalIcon(vm, iconName) {
  // Look for custom component in the configuration
  var component = vm.$vuetify.icons.component; // <-- issue here when rendering for first time

  if (iconName.startsWith('$')) {
  // Get the target icon name

src/plugins/vuetify.ts

import Vue from "vue";
import Vuetify from "vuetify/lib";
import { UserVuetifyPreset } from "vuetify";

Vue.use(Vuetify);

export const options: UserVuetifyPreset = {
  icons: {
  iconfont: "mdiSvg"
  }
};

export default new Vuetify(options);

3
vuejs2vuetify.jsstorybook

3 Answers

0
votes

Workaround for now is to set addon-essentials.docs to false. (Ref. https://github.com/storybookjs/storybook/issues/7593)

file: .storybook/main.js

  ...
  "addons": [
    "@storybook/addon-links",
    {
      name: "@storybook/addon-essentials",
      options: {
        docs: false
      }
     }
  ],
  ...
0
votes

If you don't want to disable addon-essentials.docs, you can add the following style in .storybook/preview-head.html

<style>
    .sb-errordisplay {
        display: none !important;
    }
</style>
0
votes

Another workaround without having to disable addon-essentials or adding any styles in the preview-head.html file you can import Vuetify at the top of your .stories.js (or .stories.ts) file like so e.g.

import vuetify from '@/plugins/vuetify'

then when you declare your storybook Template, pass in your vuetify object

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { YourComponent },
  vuetify, // <-- Very important line
  template: `<YourComponent />`
})

I found this workaround in this thread Cannot read property 'mobile' of undefined - Vue/Vuetify/Storybook