Source code is not rendered in Docs 6.4.0-beta.1

[steven-pribilinskiy]

When I use the new Story API available in 6.4 the Show code button is not available, instead it says "No code available"

---

Can be fixed by adding

  parameters: {
    docs: {
      inlineStories: false,
    },

That is not a good solution as iframe needs a height to be specified

---

Temporarily switching to the former API:

(it is wrong on the screenshot as there's also a need for Template.bind({}))

[angry-meow]

Reproduced in the official Storybook (6.4.0-beta.1 at the moment). https://next--storybookjs.netlify.app/official-storybook/?path=/docs/addons-a11y-basebutton--default

[archfisv]

I can confirm, we have the same issue.

[shilman]

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

The official-storybook as mentioned by @angry-me above also did not show source for some stories. However I've tracked that down and fixed it in #16259 and I believe it is unrelated to this issue.

Thanks! 🙏

[angry-meow]

@shilman, I've just checked the Official Storybook again and now that seems to be okay in 6.0.4-beta.5.

[lukemorales]

I have the same issue, the screenshot above is running 6.4.0-beta.5, no source code is displayed when using CSF3, and controls are not working in Docs

[jonniebigodes]

@shilman I've encountered the same issue, in my case with MDX. As I was testing this approach in MDX I thought that it would be something worthwhile to use when documenting the MDX stories with a render function eliminating the need for an external function to render the component and consolidating the story within its construct, providing a better UX in my humble opinion. I've setup reproductions based on the documented frameworks here (see the MDXButton.stories.mdx file for context):

• Angular
• React
• Vue 3
• Svelte

Let me know how best we should proceed on this and I'll adjust accordingly.

[shilman]

Thanks so much for this @jonniebigodes. 🙏

In the React example, here's what I see:

I think this is a bit different from what's described above, since there IS source code available, it's just not the correct source out of the box. However, if a user's source-loader wasn't set up properly they would see "no code available", so I think it's the same underlying problem.

As an aside, if I set features.modernInlineRender to true in main.js (an experimental feature that we do NOT recommend yet!), I see what I think you'd expect.

I'll try to debug this tomorrow. @tmeasday I'm pretty sure that this is not getting recognized as an "args" story on the first render somehow, and that's the root of it.

[tmeasday]

Thanks for the repro(s!) @jonniebigodes - so good.

So the issue here is the same as in https://github.com/storybookjs/storybook/pull/16037 - there I added this concept of the "rendering" stories that we wait for to emit DOCS_RENDERED.

We add stories to that list when they are (starting to be) rendered by <Story/>.

However, in https://github.com/storybookjs/storybook/pull/16161, we also added loading behaviour to <Canvas/>, which means the <Story/> itself does not render.

I think the fix might be for the "loading" <Canvas/> to render the <Story/> with isLoading=true. Or to register the story itself. Will discuss with @shilman.

[shilman]

Yippee!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-beta.7 containing PR #16280 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

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

[jonniebigodes]

@tmeasday and @shilman you know me, no need to thank whatsoever, glad that I was able to provide some context on this issue and appreciate the follow-up!