Vuetify icons gives an error with storybook

[MoSaberMo]

Describe the bug

I'm facing an issue When I use the storybook with vuetify framework and when I run the project it gives the following error multiple times.

Cannot read properties of undefined (reading 'component')
TypeError: Cannot read properties of undefined (reading 'component')
    at remapInternalIcon (http://localhost:6006/vendors~main.f3adcb00877b75c26c76.bundle.js:267378:37)
    at VueComponent.getIcon 

knowing that the my project is working fine and all of the components renders correctly even v-icon.

main.js

const path = require('path');

module.exports = {
  addons: [
    '@storybook/addon-controls', 
    '@storybook/addon-docs', 
    '@storybook/addon-actions',
    '@storybook/preset-scss',
  ],
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    config.module.rules.push({
      resolve: {
        alias: {
          '@': path.resolve(__dirname, '../src'),
          vue: 'vue/dist/vue.js',
          'vue$': 'vue/dist/vue.esm.js',          
        },
      },
    });

    // Return the altered config
    return config;
  },
};

preview.js

import { configure, addDecorator } from "@storybook/vue";
import "!style-loader!css-loader!sass-loader!./scss-loader.scss";
import "vuetify/dist/vuetify.css";
import "@mdi/font/css/materialdesignicons.css";

import i18n from '../src/plugins/i18n';
import Vue from "vue";
import Vuetify from "vuetify";

Vue.use(Vuetify);

Vue.prototype.$t = function(...args){
  return i18n.t(...args);
}

addDecorator(() => ({
  i18n,
  vuetify: new Vuetify({
    rtl: true,
    icons: {
      iconfont: "mdi",
    }
  }),
  template:
    '<v-app style="background-color: white"><v-main><story/></v-main></v-app>',
}));

// automatically import all files ending in *.stories.js
configure(require.context("../stories", true, /\.stories\.js$/), module);

manager.js

import "@storybook/addon-actions/register";
import "@storybook/addon-links/register";

Here is an example of my stories

import Calendar from "../src/components/Calendar/calendar.vue";

export default {
  title: "Components/Calendar",
  component: Calendar,
};

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

export const WithLabel = Template.bind({});
WithLabel.args = {
  label: "Pick a date",
};

To Reproduce

No response

System

System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11500 @ 2.70GHz
  Binaries:
    Node: 14.19.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.16 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 109.0.5414.120
    Edge: Spartan (44.19041.1266.0), Chromium (109.0.1518.78)  
  npmPackages:
    @storybook/addon-actions: ^6.1.11 => 6.5.16
    @storybook/addon-controls: ^6.5.16 => 6.5.16
    @storybook/addon-docs: ^6.1.11 => 6.5.16
    @storybook/addon-essentials: ^6.5.16 => 6.5.16
    @storybook/addon-links: ^6.1.11 => 6.5.16
    @storybook/addons: ^6.1.11 => 6.5.16
    @storybook/preset-scss: ^1.0.3 => 1.0.3
    @storybook/vue: ^6.1.11 => 6.5.16
    "vuetify-loader": "^1.7.0",
    "vuetify": "^2.6.0"

Additional context

No response

[shilman]

@MoSaberMo have you tried with Storybook 7.0? npx sb@next init to install a new project, or to upgrade https://storybook.js.org/migration-guides/7.0

@Integrayshaun Is this something you've encountered before or can otherwise help out with?

[ShaunEvening]

@shilman I haven't tried this out with vue 2 yet.

@MoSaberMo Do you have repo where I can dig into the issue a little more?

[MohammedSaberMohammed]

@shilman I tried to upgrade before but it didn't fix the problem. I'll try it again.

[MohammedSaberMohammed]

@Integrayshaun Here is the github repo U can check :

1. LabelAndValue
2. Calendar
3. Emptyplaceholder

Thanks in advance.

[ShaunEvening]

@MohammedSaberMohammed Thank you for sending the repo this way! I'm currently away at a spa but I'll look at this tomorrow morning 🙏

[MohammedSaberMohammed]

Hello @Integrayshaun,

Did you find the issue's root cause ?

[ShaunEvening]

Hey @MohammedSaberMohammed!

I had a chance to dive in to your codebase but wasn't able to get a full solution working. Based on what I could gather, The vue-cli is adding a bunch of stuff into the webpack config including a dedicated vuetify-loader. However, I wasn't able to pin point exactly what it adds and what you'd need to add to Storybook's webpackFinal to get this working properly

[MoSaberMo]

@Integrayshaun I appreciate your efforts, What can I do to make the project work with u? I'm open to any help. Or Do you need more time to investigate ?

[Mikaleb]

Double down on this issue :/

[ShaunEvening]

@MoSaberMo

Apologies for the wait. It's been quite busy with the release of Storybook 7.0 and trying to crush some more Styling configuration problems.

Now that we have a stable Storybook 7.0 can we revisit getting your project upgraded using

npx storybook@latest upgrade

Once you have upgraded, you can replace @storybook/preset-scss (Which is now deprecated) with @storybook/addon-styling. There's more information in this guide

Let me know if you still get stuck and we can take another crack at it 🙏

[ramsesndame237]

Hi, is this issue still relevant? If it has been resolved, it might be a good idea to close this issue to keep the repository up-to-date. Thanks!