Vue/Nuxt – TypeError: Cannot add property components, object is not extensible

[rwam]

CONTEXT

We are using Storybook to build and test vue components that are in use in a Nuxt.js application. After migration to Apollo 3.x I want to use this addon to mock our GraphQL queries in some of the components.

• Apollo (@apollo/client): 3.5.9
• Storybook (@storybook/vue): 6.4.19
• Vue: 2.6.14

EXPECTED BEHAVIOR

Storybook using the MockingProvider work without any issues.

CURRENT BEHAVIOR

Storybook cannot be used because any story fails with a TypeError:

TypeError: Cannot add property components, object is not extensible
    at prepare (decorateStory.js:29:1)
    at decorateStory.js:67:1
    at decorateStory.js:55:1
    at push../.storybook/preview.js.decorators (preview.js:90:1)
    at hooks.js:179:1
    at decorateStory.js:54:1
    at hooks.js:209:1
    at unboundStoryFn (prepareStory.js:217:1)
    at storyFn (PreviewWeb.js:1116:1)
    at PreviewWeb.renderToDOM (render.js:46:1)

The error occurs on webpack:///node_modules/@storybook/vue/dist/esm/client/preview/decorateStory.js and the following line of code:

      story.components = Object.assign({}, story.components || {}, {
        story: innerStory
      });

TEMPORARELY SOLUTION

I have to remove the addon to get Storybook working again besides of the stories that relate to the use of the ApolloClient.

[bmulholland]

Yeah looks like this is React-only, but that's not explained anywhere in the docs. I wasted hours trying to figure out why stories stopped loading when I included this as a storybook addon; no errors were generated, just all my stories were blank. It really should be clear that this is a React-only addon.

[lifeiscontent]

@bmulholland @rwam if you can give me some context on how I can support vue or what a story in vue would look like with an Apollo Integration, I'd be happy to do what I can to get it working.

[bmulholland]

I ended up mocking out Apollo with MSW (https://github.com/mswjs/msw-storybook-addon) so I've solved my immediate problem. That approach does feel heavy-handed, though, and I'd prefer a more direct mock like this library.

@lifeiscontent probably the easiest way to try this out in Vue would be to use Nuxt. Some brief instructions that may help:

1. Install nuxt https://nuxtjs.org/docs/get-started/installation
2. Install nuxt storybook https://storybook.nuxtjs.org/getting-started/usage
3. Switch to manual storybook setup to get .storybook/preview.js: https://storybook.nuxtjs.org/advanced/manual-setup
4. There's a sample component and story here: https://storybook.nuxtjs.org/getting-started/usage
5. Install nuxt apollo: https://github.com/nuxt-community/apollo-module#setup
6. See vue-apollo for the syntax: https://apollo.vuejs.org/guide/apollo/
7. Here's how to use apollo in a component -- you can copy the script part into the component you took from above. https://apollo.vuejs.org/guide/apollo/#queries