[Storybook 6.4] [Vue] [addon-docs] Stories are hidden in docs tab

[bodograumann]

Describe the bug
After updating to storybook-6.4.0-rc.11 in a vue-2 project, the CSF stories in the docs tab are rendered, but hidden by

:not(.sb-show-main) > #root,
:not(.sb-show-main) > #docs-root,
:not(.sb-show-preparing-story) > .sb-preparing-story,
:not(.sb-show-preparing-docs) > .sb-preparing-docs,
:not(.sb-show-nopreview) > .sb-nopreview,
:not(.sb-show-errordisplay) > .sb-errordisplay {
  display: none;
}

For MDX stories there is a warning in the console and the element is only rendered partially(?)

Component RMyButton was not imported, exported, or provided by MDXProvider as global scope

To Reproduce
An example can be found here: https://github.com/bodograumann/vue-cli-plugin-storybook/tree/webpack-5
To seethe error:

git clone https://github.com/bodograumann/vue-cli-plugin-storybook/tree/webpack-5
cd vue-cli-plugin-storybook
npm install
npm run test
cd test
npm run storybook:serve

System

Environment Info:

  System:
    OS: Linux 5.15 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
  Binaries:
    Node: 17.1.0 - /usr/bin/node
    Yarn: 1.22.17 - /usr/bin/yarn
    npm: 8.1.3 - /usr/bin/npm
  Browsers:
    Firefox: 94.0.2

Additional context
The problem was initially brought up on the discord support channel by someone else.
With vue-3 everything seems to work fine.

[spiltcoffee]

I found that the Docs tab last worked for Vue in 6.4.0-beta.32 for me; going to 6.4.0-beta.33 breaks as described above. Guessing it's a change in beta 33 that broke this.

Edit: In fact, will take a stab and say it's this particular change that is involved: 83f223e#diff-850e2e1559576ae7e040a8fb199b86c3d75c0da9dbd0c7368b913cd38c762386R4

[spiltcoffee]

Actually, that leads me to a potential workaround for 6.4.0-beta.33 and higher. Not sure what negative impacts this will have, though, so no guarantees this is perect... but it makes the docs tab work for me (for now)!

.storybook/preview-head.html

<style>
  :not(.sb-show-main) > #root {
    display: block;
  }
</style>

[bodograumann]

The problem also occurs in the kitchen-sink: https://next--storybookjs.netlify.app/vue-kitchen-sink/?path=/docs/button--rounded

[amuttsch]

The workaround from @spiltcoffee works for me, but only in the canvas tab, the Doc tab is still hidden. I see that storybook seems to add an error overlay, but actutally no errors occured for my components.

I'm using storybook with React.

This fixed both tabs for me:

<style>
    :not(.sb-show-main) > #root {
        display: block;
    }
    :not(.sb-show-main) > #docs-root {
        display: block;
    }
</style>

[maxigimenez]

Same issue here! @spiltcoffee workaround works 👍

[tmeasday]

So the "root" of this issue (zing) is that the prepareForInline function in Vue creates a second #root element:

storybook/addons/docs/src/frameworks/vue/prepareForInline.ts

Line 32 in 08301a3

return h('div', { attrs: { id: 'root' } }, children);

That's clearly invalid (can't have >1 element with the same id) and I'm not sure if it actually is needed at all. In any case the issue will be worked around by the fix for #16847, and we are moving away from prepareForInline, so I guess that's fine.

[shilman]

Ooh-la-la!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.3 containing PR #16850 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

Closing this issue. Please re-open if you think there's still more to do.