Cannot add property components, object is not extensible

Describe the bug Installed @storybook/addon-info to work with a Vue app, but I’ve been unable to get it working as it seems to break storybook as it renders the error Cannot add property components, object is not extensible.

I’ve tried to use addDecorator in config.js (breaks all stories) and also inside a single story (breaks just that story).

Also uninstall all other addon’s and went back to a clean storybook install but still running into the same issue.

Screenshots

Code snippets

// .storybook/config.js

import '@storybook/addon-console';
import { addDecorator, configure } from '@storybook/vue';
import { withInfo } from '@storybook/addon-info';

// Import plugins.
import Vue from 'vue';
import Vuex from 'vuex';

// Install plugins.
Vue.use(Vuex);

// Storybook Info Addon
// https://github.com/storybooks/storybook/tree/master/addons/info#storybook-info-addon
addDecorator(withInfo);

// Load stories, display order determined by import order.
const req = require.context('../src', true, /.stories.js$/);
function loadStories() {
  req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module);

// my.stories.js

import { storiesOf } from '@storybook/vue';

import Button from './button';

storiesOf('Components/Atoms/Button', module)
  .add('default', () => ({
    template: `
      <Button @onClick="onClick">Default Button</Button>
    `,
    components: { Button },
  }));

// button.vue

<template>
  <Component
    :is="element"
    :class="buttonClasses"
    v-bind="attributes"
    @click="$emit('onClick')"
  >
    <slot />
  </Component>
</template>

<script>
export default {
  name: 'Button',
  props: {
    href: { type: String, default: '' },
    primary: { type: Boolean, default: false },
  },
  computed: {
    element() {
      return this.href ? 'a' : 'button';
    },
    buttonClasses() {
      return {
        button: true,
        primary: this.primary,
        secondary: !this.primary,
      };
    },
    attributes() {
      return {
        ...(this.href ? { href: this.href, target: '_blank' } : {}),
      };
    },
  },
};
</script>

System:

• OS: MacOS
• Device: Macbook Pro 2018
• Browser: chrome
• Framework: vue
• Addons: addon-info
• Version: 4.0.4

Would absolutely ❤️ to use this plugin as it’s one of the main attractions to storybook for us. Please let me know if there is anything I can to do to help.

[lloydjatkinson]

I think this needs to be noted somewhere in the docs - spent a few hours debugging this not realising it didn’t support Vue.

[igor-dv]

The official addon-info is platform specific, and currently has only React implementation https://github.com/storybooks/storybook/blob/next/ADDONS_SUPPORT.md

But you can use this one https://github.com/pocka/storybook-addon-vue-info =)