[Bug]: Storybook 8 Composition Flakiness

[willwill96]

Describe the bug

When there are multiple composed storybooks, it seems that the loading becomes flaky. This is not an issue we have with our current Storybook 7 app. It seems like only two composed storybooks can be loaded at a time from my testing. Whenever we try to load composed storybooks, at least one always fails be stuck in a loading state in the sidebar like the following:

To Reproduce

1. Clone this repo: https://github.com/willwill96/Storybook8CompositionRepro

2. Build & run the docker image (instructions in readme)

3. Navigate to http://localhost:3003/main-storybook and note that at least one composed storybook always fails to load.

System

Note: since the repro runs in docker, the exact node/npm version is probably not accurate.



  System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (4) x64 AMD Ryzen 7 5825U with Radeon Graphics
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm <----- active
  npmPackages:
    @storybook/addon-essentials: ^8.0.0-rc.1 => 8.0.0-rc.1
    @storybook/addon-interactions: ^8.0.0-rc.1 => 8.0.0-rc.1
    @storybook/addon-links: ^8.0.0-rc.1 => 8.0.0-rc.1
    @storybook/addon-onboarding: ^8.0.0-rc.1 => 8.0.0-rc.1
    @storybook/blocks: ^8.0.0-rc.1 => 8.0.0-rc.1
    @storybook/react: ^8.0.0-rc.1 => 8.0.0-rc.1
    @storybook/react-vite: ^8.0.0-rc.1 => 8.0.0-rc.1
    @storybook/test: ^8.0.0-rc.1 => 8.0.0-rc.1
    storybook: ^8.0.0-rc.1 => 8.0.0-rc.1

Additional context

I initially brought this up in this discussion, but it seemed like a bug ticket was warranted after more investigation:
#25276 (reply in thread)

[ndelangen]

I have a suspicion the storybook all share the same origin...
I think this just got fixed by: #26304

I'll verify if this is the case.

[ndelangen]

I followed the instructions, but ran into trouble:

Instructions to Reproduce Error

1. Build and start app

docker build -t storybook8compositionrepro .

docker run storybook8compositionrepro -p 3003:3003

At step 2, I got this error:

% docker run storybook8compositionrepro -p 3003:3003                                                                                                                                                          ~/Projects/Storybook/repros/Storybook8CompositionRepro-main
Error: unknown shorthand flag: 'p' in -p

I'm not very familiar with docker, so I do not know how to solve this.

[willwill96]

Hey @ndelangen, thanks for taking a look!

And apologies, the run command I originally had in the readme did not work -- I had moved cli args around thinking the order didn't matte (apparently the docker tag must be the last arg). The command should be the following (I've also updated it in the readme instructions):

docker run -p 3003:3003 storybook8compositionrepro 

[ndelangen]

I'm releasing a canary to test this inside the docker:
https://github.com/storybookjs/storybook/actions/runs/8158297657

[ndelangen]

Hmm, I tried, but either I'm doing something wrong or it's still broken...

I will need to simplify the repro a lot in order to debug.

[ndelangen]

@willwill96 I'm still investigating, but I've noticed you have this:

  refs: {
    'otherstorybook': {
      title: 'other storybook',
      url: '/other-storybook',
    },
    'otherstorybooktwo': {
      title: 'other storybook 2',
      url: '/other-storybook-2',
    },
    'otherstorybookthree': {
      title: 'other storybook 3',
      url: '/other-storybook-3',
    },

And this is not a valid use of composition, these url fields should be full URLs, not relative to anything, aka, they should start with https://

[willwill96]

Why aren't relative urls officially supported? We can work around that at my work, but we've been using relative urls for composition for a couple years now to deploy to multiple domains for our development and it's convenient to have the single build of storybook.

I tried updating the urls to have the full url (http://localhost:3003/other-storybook), but am seeing the same result.

Is there anything I can do to help simplify the repro? I wasn't able to reproduce with a single composition ref and wasn't able to reproduce consistently with just two. With 3 setup, it seems like at least one of storybooks consistently fails to load. The contents of each of the storybooks should be pretty much identical with the exception of package name and storybook-1 has the composition references. Otherwise, they were left as-is from what was generated from the storybook cli. Maybe some of the stories can be deleted? The main purpose of the Dockerfile is to have all of the storybooks hosted on the same url so CORS wouldn't be an issue.

[ndelangen]

@willwill96 I got a solution, and I check if the local URLs are a problem, and they don't seem to be, sorry for pointing the finger at that.

It seems though unintended originally, the code is working with relative paths.
I'd still not personally recommend it, but if it works I can't argue with results.

I'll be opening a PR later today.

I really appreciate your responsiveness and willingness to help 🙏

[willwill96]

Awesome! Thank you for the help on this, and looking forward to the v8 release! If there is anything I can do to help test the updates, please let me know.