globalTypes does not work properly with Composition

[WilliamABradley]

Describe the bug A clear and concise description of what the bug is.

When using composition, the global toolbar options appear, but the default value is not set, when you update the value, the story doesn't re-render. This situation is slightly improved if you create the globalType in the global storybook preview.js file, as it sets the default value, and will update the global value in the url.

Checking the Console Logs, I see:

received globals from a non-local ref. This is not currently supported.

To Reproduce Please create a reproduction by running npx sb@next repro and following the instructions. Read our documentation to learn more about creating reproductions. Paste your repository and deployed reproduction here. We prioritize issues with reproductions over those without.

1. Create a Core Storybook, and a Composition Storybook
2. Define in preview.js in composition storybook.

   export const globalTypes = {
   locale: {
     name: 'locale',
     description: 'Locale',
     defaultValue: 'en-NZ',
     toolbar: {
       icon: 'globe',
       items: [
         { value: 'keys', title: 'keys' },
         { value: 'en-NZ', title: 'en-NZ' },
         { value: 'zh-CN', title: 'zh-CN' },
         { value: 'ru-RU', title: 'ru-RU' },
       ],
     },
   },
   };

3. Define a Story that uses globals:

   const Story = (args, ctx) => {
   const locale = ctx.globals.locale;
   return <p>{locale}</p>;
   };

4. Use the toolbar to update the value, notice it doesn't update the story, and it doesn't update the url, and it doesn't even set the toolbar highlight.
5. Define in preview.js in core storybook.

   export const globalTypes = {
   locale: {
     name: 'locale',
     description: 'Locale',
     defaultValue: 'en-NZ',
   },
   };

6. Notice that now the toolbar now highlights, and the url updates, but the story does not reload.

System Please paste the results of npx sb@next info here.

npm: 7.15.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.1.0), Chromium (92.0.902.67)
  npmPackages:
    @storybook/addon-essentials: ^6.3.6 => 6.3.6
    @storybook/addon-links: ^6.3.6 => 6.3.6    @storybook/react: ^6.3.6 => 6.3.6

Additional context Add any other context about the problem here.

[william-will-angi]

We are also experiencing this issue on our composition instance. @WilliamABradley any chance you found a workaround?

[WilliamABradley]

@william-will-angi the only workaround is to change the state, then refresh the page.

[tmeasday]

Hi @WilliamABradley -- are the globals passed to the composed ("composition") storybook?

As the warning message says (a little cryptically, I admit), we do not currently support globals in composed Storybooks. I guess the reason for this is that the set of globals and allowed values can change between the different Storybooks, but the "globals" mechanism assumes they will be the same for every story.

That's not to say it doesn't necessarily make sense, I guess the toolbars would just change as you browse between stories/storybooks? I don't think it has every been properly designed.

I'm not sure if we have an issue for the feature "support globals across composed Storybooks" (I couldn't find one in searching).

[WilliamABradley]

Essentially the toolbars work normally when the storybook is standalone, but don't work when the storybook is composed. The toolbar only shows up if the toolbar addon is installed in both the host storybook and composed storybook if I remember correctly.

[WilliamABradley]

So I think what is missing is some method of synchronising the global state between the composed and host storybook. The only way to synchronise them at the moment is to refresh the page.

[taismassaro]

Having the same issue which is blocking us at work and making me rethink the use of Composition. we really like the idea of keeping the stories separated into their own packages and having a clearer division of packages in the sidebar, but it doesn't seem intended for composing Storybooks that are related to each other and need to share some state (like theme and locale), more like just for injecting external libraries' Storybooks into your own Storybook for a unified user experience. @tmeasday @shilman any thought on this?

[tmeasday]

Perhaps there is something sensible we can do in the case that a set of global types is identical in both the composing and composed storybook? We might not need to address the fullblown problem of what happens when they are different in that case?

[JSMike]

Also experiencing this in a composed storybook, specifically for the viewport, measure, outline, and a11y tools. The buttons appear and url changes when the buttons are selected but the addons don't apply unless you toggle between to the docs tab and then back to the canvas after the urls changes. Standalone the addons work as expected. The viewport tool doesn't work at all in the composed storybook because it doesn't change the url. Remounting the component also has no effect, only toggling between canvas/docs or reloading.

[JSMike]

@shilman Is there any chance of getting some priority on this? Users of our composed storybook often complain that the controls are broken.

[sneko]

Any of you have more details what could be the issue? Having as error:

received globals from a non-local ref. This is not currently supported.

... this is not clear. Could it tell the origin of this? Decorator? Plugin? ... on my side I tried to remove all plugins except "essentials", and all decorators, and that's it.

Both configs are in the same Node package but I made sure they do not share common files (importing helpers or so)... I guess they just share the library they import (@storybook/html...). But that's the same when building+starting (when they are not supposed to import librariries)... Any idea what could be the cause? Loosing my mind on this 😢

Thank you,

[sneko]

Just found the solution... In my monorepo I was using 1 npm package for Storybook, and with different commands I was building or serving different stories (so multiple Storybook instances), unfortunately the way the Storybook cache is managed is conflicting because they share the same folder (node_modules/.cache/*).

I thought about customizing the cache path for each command, it's easy with Vite, but still Storybook has its own paths not configurable. I found they use https://github.com/sindresorhus/find-cache-dir but even by setting CACHE_DIR the node_modules/.cache/sb-manager stays at the same place...

The only solution is to use different npm packages (for me it was not a big deal since inside a monorepo), but even with that I had some issues of cache concurrency because I was running:

storybook dev -p 6006
storybook dev -p 6007 -c ../my-other-package/.storybook

When looking for the cache folder the Storybook CLI does not start from the -c folder going upward... they start always from the current working directory. The solution is to use:

storybook dev -p 6006
cd ../my-other-package && storybook dev -p 6007

Now no more issue!

Hope it helps 😃

[JSMike]

@shilman Is there any chance of getting some priority on this? Users of our composed storybook often complain that the controls are broken.

FYI, the issue with controls appears to be resolved when upgrading to Storybook v7

[DotwoodMedia]

I have the same problem with the last storybook. When I update a global type, nothing is changed in the story. You have to refresh the page for it to work

[luisfagottani]

I have the same problem as well! Another guy already did a feature request about this. https://github.com/storybookjs/storybook/issues/20001

[MieszkoWrzeszczynski]

any news?