Vuetify Storybook remapInternalIcon 问题答案

【问题标题】：Vuetify Storybook remapInternalIcon issueVuetify Storybook remapInternalIcon 问题
【发布时间】：2023-04-05 21:02:02
【问题描述】：

使用 Vuetify 2 和 Storybook 6（来源 https://github.com/lydonchandra/vuetify2storybook6）

组件渲染正常，但在第一次渲染组件时不断收到此错误 TypeError，因为 vm.$vuetify.icons 未定义。

不确定我错过了哪个 storybook-vuetify 初始化桥？

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);

【问题讨论】：

标签： vuejs2 vuetify.js storybook

【解决方案1】：

另一种解决方法，无需禁用 addon-essentials 或在 preview-head.html 文件中添加任何样式，您可以在 .stories.js（或 .stories.ts）文件的顶部导入 Vuetify，例如

import vuetify from '@/plugins/vuetify'

然后当你声明你的故事书模板时，传入你的 vuetify 对象

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

我在这个帖子Cannot read property 'mobile' of undefined - Vue/Vuetify/Storybook找到了这个解决方法

【讨论】：

【解决方案2】：

如果不想禁用addon-essentials.docs，可以在.storybook/preview-head.html中添加如下样式

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

【讨论】：

【解决方案3】：

目前的解决方法是将 addon-essentials.docs 设置为 false。（参考。 https://github.com/storybookjs/storybook/issues/7593)

文件：.storybook/main.js

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

【讨论】：