Error migrating from 6.3 to 6.4 or 6.5: undefined is not an object (evaluating 'element.options[VALUES]')

[mphstudios]

Describe the bug

Migrating from Storybook 6.3 to 6.4 or to 6.5-alpha throws undefined is not an object (evaluating 'element.options[VALUES]')

renderToDOM@http://localhost:3000/vendors~main.8721dd71.iframe.bundle.js:2:534629
tryCatch@http://localhost:3000/vendors~main.8721dd71.iframe.bundle.js:2:2154765
invoke@http://localhost:3000/vendors~main.8721dd71.iframe.bundle.js:2:2154392
asyncGeneratorStep@http://localhost:3000/vendors~main.8721dd71.iframe.bundle.js:2:405790
_next@http://localhost:3000/vendors~main.8721dd71.iframe.bundle.js:2:406110
@http://localhost:3000/vendors~main.8721dd71.iframe.bundle.js:2:406247
Promise@[native code]
@http://localhost:3000/vendors~main.8721dd71.iframe.bundle.js:2:406015
tryCatch@http://localhost:3000/vendors~main.8721dd71.iframe.bundle.js:2:2154765
invoke@http://localhost:3000/vendors~main.8721dd71.iframe.bundle.js:2:2154392
asyncGeneratorStep@http://localhost:3000/vendors~main.8721dd71.iframe.bundle.js:2:405790
_next@http://localhost:3000/vendors~main.8721dd71.iframe.bundle.js:2:406110
promiseReactionJob@[native code]

System

System:
    OS: macOS 11.6.1
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
  Binaries:
    Node: 12.18.3 - ~/.nodenv/versions/12.18.3/bin/node
    Yarn: 1.22.10 - ~/.nodenv/versions/12.18.3/bin/yarn
    npm: 6.14.6 - ~/.nodenv/versions/12.18.3/bin/npm
  Browsers:
    Safari: 15.1
  npmPackages:
    @storybook/addon-a11y: ^6.5.0-alpha.3 => 6.5.0-alpha.3 
    @storybook/addon-actions: ^6.5.0-alpha.3 => 6.5.0-alpha.3 
    @storybook/addon-docs: ^6.5.0-alpha.3 => 6.5.0-alpha.3 
    @storybook/addon-essentials: ^6.5.0-alpha.3 => 6.5.0-alpha.3 
    @storybook/addon-events: ^6.2.9 => 6.2.9 
    @storybook/addon-interactions: ^6.5.0-alpha.3 => 6.5.0-alpha.3 
    @storybook/addon-jest: ^6.4.9 => 6.4.9 
    @storybook/addon-links: ^6.5.0-alpha.3 => 6.5.0-alpha.3 
    @storybook/addon-queryparams: ^6.2.9 => 6.2.9 
    @storybook/addons: ^6.5.0-alpha.3 => 6.5.0-alpha.3 
    @storybook/jest: 0.0.5 => 0.0.5 
    @storybook/testing-library: 0.0.7 => 0.0.7 
    @storybook/vue: ^6.5.0-alpha.3 => 6.5.0-alpha.3 

Additional context ./storybook/main.js

module.exports = {
  addons: [
    '@luigiminardim/storybook-addon-globals-controls',
    {
      name: '@storybook/addon-essentials',
      options: { backgrounds: false }
    },
    '@storybook/addon-events',
    'storybook-fixtures',
    '@storybook/addon-interactions',
    '@storybook/addon-a11y',
    '@storybook/addon-jest',
    '@storybook/addon-links',
    '@storybook/addon-queryparams',
    'storybook-addon-designs'
  ],
  core: {
    builder: 'webpack4',
  },
  features: {
    babelModeV7: false,
    interactionsDebugger: false,
    storyStoreV7: true
  },
  framework: '@storybook/vue',
  stories: ['../src/components/**/*.stories.@(js|mdx)']
}

[shilman]

Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro. Thank you! 🙏

[mphstudios]

Michael (@shilman) I tried to create a repro with several levels of reduced complexity and though was able to reproduce the issue am not convinced the issue is not caused by specifics of our project so I invited you as an outside collaborator. Hopefully we can find the issue and fix/document it to help others.

[shilman]

Hi @mphstudios are you on our Discord https://discord.gg/storybook? I'm able to access the repo but unable to install due to some private npm packages.

[stefanlivens]

Hi, just a quick note that we have the same problem: a storybook setup with webpack5 and vue2. Trying out the new storyStoreV7 will result in a error 'Cannot read properties of undefined (reading 'STORYBOOK_WRAPS')'

However, just switching to vue3 and @storybook/vue3 will make it magically work ! (sorry can't make a repo, it is all internal stuff)

[dbush-clickup]

I'm seeing a similar issue with Angular 12 or 13 storybook/docs 6.4.13 and 6.5.alpha.21

All I have to do is take a standard setup, create 6 stories (duplicates are fine) and I see the freeze.

I created this repo for another bug, but you can pull it down and add 5 stories to one of the story files and you should be able to see the issue. https://github.com/DaveMBush/demo-workspace

[vidal7]

Hi guys! Any news on this issue? We have thousands of stories in Vue2 all with storiesOf API and we started converting in CSF3 format.

Since then, our storybook cold start is twice as slow in the browser and our a11y tests with storyshots-puppeteer are much much slower.

It happens because when initializeWithStoryIndex is called in lib/preview-web/src/PreviewWeb.tsx, the emitted event Events.SET_STORIES stringify the payload returned by this.storyStore.getSetStoriesPayload() with telejson and because of CSF3 API, args are now serialized for all stories and it causes a very perceptible slowdown.

With the storyStoreV7, this event is not emitted but we are stuck with this issue.

[vidal7]

Michael (@shilman), can you please check my previous comment (https://github.com/storybookjs/storybook/issues/16985#issuecomment-1123811368). It looks like that Vue2 users are left behind and can't use storyStoreV7 and all the optimisations that come with it.

For now and for us, switching all our stories in CSF3 is not an option because of serialization of all the args. I was hoping that switching to storyStoreV7 fix that performance issue but can't because of this current issue.

Do you still need a reproduction repo?

Thank you.

[prashantpalikhe]

This merged PR #18375 should fix the issue with Vue2 and storyStoreV7

[vidal7]

@prashantpalikhe Yes I can confirm that version 6.5.7 fixes this issue. Thank you very much! And thank you @yannbf for the PR!