storybook: [Bug]: Storybook Composition does not connect properly on Storybook 7

Describe the bug

First off, I would like to point out that I am trying to run my main storybook with composition config on Storybook 7 while my reference storybooks are still on Storybook ~6.5, so I’m not sure if this is intended to work. I can do some more investigation into upgrading those other ones to see if it resolves my issues, but it might be a while before I can get to it.

When my static storybook loads, I get an error from Explorer. In this instance selected is null and ref.id is undefined. The ?. operator causes them to be equal and get an error: Screenshot 2023-04-17 at 5 56 41 AM

I wrote a patch in my project to have a better check than the above. Basically changing that line to the following:

          selectedStoryId={selected?.refId && selected.refId === ref.id ? selected.storyId : null}

This worked for the most part. The only problem is now with that I am seeing double instances of all my references – one that looks exactly how I would expect and another that stays in a perpetual loading state. Screenshot 2023-04-17 at 6 36 47 AM

Hopefully this is good information. I unfortunately can’t share more because it’s in private repos.

To Reproduce

Will try and set up a repro – composition has always been difficult for me to set up locally.

System

All storybook dependencies `@7.0.5`

Additional context

No response

About this issue

Original URL
State: open
Created a year ago
Reactions: 2
Comments: 15 (6 by maintainers)

Most upvoted comments

We also found that having ref keys in camelCase will cause the same issue. The issue is resolved for us when we lowercase everything

Before:

refs: {
    desktopWeb: {
      title: "DesktopWeb",
      url: "http://localhost:4400",
    },
    mobileWeb: {
      title: "MobileWeb",
      url: "http://localhost:4500",
    },
  },

After:

refs: {
    desktop: {
      title: "DesktopWeb",
      url: "http://localhost:4400",
    },
    mobile: {
      title: "MobileWeb",
      url: "http://localhost:4500",
    },
  },

This seems to fix both the duplication issue as well as the initial load null storyId issue.

so tl;dr ensure all ref keys are lowercased without spaces and hopefully that will fix it.

B-Stewart on Aug 4, 2023