Error storybook TypeError: Cannot read properties of undefined (reading 'get')

user_15755440 0
Viewed 1716

I'm using the storybook with vue 3 and I started getting this error, is it happening to anyone else?

ERR!  TypeError: Cannot read properties of undefined (reading 'get')

This is my package .json

    "@storybook/addon-actions": "^6.4.22",
    "@storybook/addon-essentials": "^6.4.22",
    "@storybook/addon-links": "^6.4.22",
    "@storybook/theming": "^6.4.22",
    "@storybook/vue3": "^6.4.22",
storybook vuejs3
1 Answers

I'm assuming that you are using @storybook/builder-vite, since I had this problem only with this particular builder.

This error is probably related to you using vue-class-component which is not well supported by the vue-docgen plugin.

Related issues:

In the second issue there is a workaround given:

import {Vue, Options} from 'vue-property-decorator'

// Create an alias for Options
const Component = Options;

// Instead of @Options do @Component
@Component({
  name: 'Icon'
})
export default class Icon extends Vue {
  // ...
}

But I had not used it so I cannot confirm that it really works. You can also entirely disable the docgen plugin in the finalVite method:

async viteFinal(storybookConfig, { configType }) {
    const { config } = await loadConfigFromFile(path.resolve(__dirname, "../vite.config.ts"))

    // remove vue-docgen plugin as it causes problems
    storybookConfig.plugins = storybookConfig.plugins.filter(plugin => plugin.name !== 'vue-docgen')

    // return the customized config
    return mergeConfig(storybookConfig, {
        base: '/dist/',
        resolve: config.resolve,
        // has-symbols requires global to be available
        define: { ...config.define, global: {} },
        // remove duplicated vue plugin
        plugins: config.plugins.filter(plugin => plugin.name !== 'vite:vue'),
    });
},

This solved issue for me. You should also check version of the storybook - I was not able to run vue3 with vite on the 6.5 version.

user_35428770
Related