[Bug]: First story dispayed in place of every other one in Docs (sb8 webcomponent)

[vprothais]

Describe the bug

Hello,
On my project where I use Storybook 7.6.18 web component version, I tried to upgrade to SB 8.0.9. I choose webpack and babel and almost everything went well. I just have a bug in the "Docs" view where my decorator seems to be called for every story in the MDX, but only passing the first story context for each call.

In order to make it simpler to debug, I reproduced the bug with an empty repo. Here are the things I've done after the init of Storybook.

I wrote the following stories file with only 2 stories :

import {html} from "lit";

export default {
    title : "context-testing"
}

export const Primary = {
    render: (args, context) => {
        return html`Primary`;
    }
}

export const Secondary = {
    render: (args, context) => {
        return html`Secondary`;
    }
}

Then in my MDX file I import my stories to display them where I want :

import * as ContextStories from "./context.stories";
import {Canvas, Meta, Story} from "@storybook/blocks";

<Meta of={ContextStories} />

# Primary

<Canvas>
    <Story of={ContextStories.Primary} />
</Canvas>

# Secondary

<Canvas>
    <Story of={ContextStories.Secondary} />
</Canvas>

And when I start storybook (pnpm storybook) and navigate to the documentation page I get the following result :

The second story is replaced by the content of the first one. In fact it's the stories order in the .stories.js file that matter. If I put the "secondary" story first, this one will be duplicated.

I wrote a simple decotator just to test. It just makes a console.log of the context :

export const decorators = [
  (storyFn, context) => {
    console.log({...context});
    return html`${storyFn()}`;
  },
];

And I get the following result, the context of the first story is passed twice.

If I navigate to the second story Canvas instead of the Docs, I get the good result. The problem only occurs on the Docs page.

To Reproduce

In an empty directory, I ran the following command : pnpm dlx storybook@latest init.
I choose webcomponent using webpack and swc.
Then I just created a new MDX + CSF story for plain HTML (not a real webcomponent).

You can check the repo here : https://github.com/vprothais/sb8-context

System

Storybook Environment Info:

  System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.0 - ~/n/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 9.8.1 - ~/n/bin/npm
    pnpm: 9.0.6 - /opt/homebrew/bin/pnpm <----- active
  Browsers:
    Chrome: 124.0.6367.91
    Edge: 124.0.2478.67
    Safari: 17.4.1
  npmPackages:
    @storybook/addon-essentials: ^8.0.9 => 8.0.9 
    @storybook/addon-links: ^8.0.9 => 8.0.9 
    @storybook/addon-webpack5-compiler-swc: ^1.0.2 => 1.0.2 
    @storybook/blocks: ^8.0.9 => 8.0.9 
    @storybook/test: ^8.0.9 => 8.0.9 
    @storybook/web-components: ^8.0.9 => 8.0.9 
    @storybook/web-components-webpack5: ^8.0.9 => 8.0.9 
    storybook: ^8.0.9 => 8.0.9

Additional context

In my real project I have some stories that rely on the context in order to get the value of a globals set by a globalTypes. And I must render different HTML structure or replace the content by an error message telling that this component can't be used in this context. That's why I use the render method and the lit html method.

[333pehr]

Hey @vprothais,

I came across the same issue you're having. I found a solution by using the Stories element instead of Canvas to render multiple stories.

The Stories element will render all the stories defined in your *.stories.ts file. For individual stories, you can add additional documentation using JSDoc at the beginning of the story definition.

[vprothais]

Thank you @333pehr for your feedback.
I can't use Stories element because in my project I have a lot of content and explaination between every story. But your comment put me in the right direction I think.

The Canvas element has a of attribute that can handle a story. So in storybook 8 I don't need to have the Story in the Canvas, I can only use the Canvas directly.

# Secondary

<Canvas of={ContextStories.Secondary} />

I'm not sure if the "old" way with the Story in a Canvas should work or not so I'm letting this ticket Open for now.

(We can add the has workaround label :) )

[vprothais]

In fact I just saw that it is documented in the migration guide : https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block

So I'm closing this.