[Bug]: Local stories not working when loading external refs

[nilpaco]

Describe the bug

I'm encountering an issue where the main documentation section of our Storybook project remains indefinitely in the loading state, despite the content having completely loaded. In the video you can see that deleting the preview-loader container the content is shown.

Screen.Recording.2024-02-08.at.12.54.52.mov

The issue appears to be with how Storybook handles the loading of external references that share the same base URL with the stories loaded externally.

Example of conflicting URLs:

• External ref URL: https://example-storybook.com/components/button/master/
• Storybook base URL: https://example-storybook.com/

The previewInitialized state doesn't get properly updated because the URL matching logic incorrectly impacts the state of an external reference instead of the local story. (see findRef source code):

findRef: (source): any => {
      const refs = api.getRefs();
      return Object.values(refs).find(({ url }: any) => url.match(source));
}

To Reproduce

Not the most elegant way but I've prepared a StackBlitz project that mimics a similar configuration. In this example, you can see that the external references match with the same URL, as previously mentioned.

https://stackblitz.com/edit/github-j9db22?file=.storybook%2Fmain.js

note: You may need to update the base url of the ref object.

System

No response

Additional context

No response

[ndelangen]

Hello @nilpaco I'm looking into this, however the video cannot be played or downloaded, it seems.

I'm looking at the stackblitz (thank you for including that!), however it's looking different for me:

It's likely because I don't have access to the composed storybook.
Maybe it's switched off due to inactivity, or it's private?

I tried following through to get access, but ran into trouble

Can you assist me in getting this reproduced reliably?

[ndelangen]

Never mind, I can reproduce this now, in stackblitz.
I'm investigating..

[nilpaco]

Thank you, @ndelangen! Sorry for the oversight. Let me know if you need anything from me. I've tried different fixes, but any attempt seems to either break something else or fall short.

[ndelangen]

I'm on the case!

[ndelangen]

I have found a solution/fix and will open a PR soon! 🎉

[nilpaco]

thank you @ndelangen for the work!