Context added in decorator becomes two instances

[marcus13371337]

Describe the bug
Currently, we are running a monorepo setup with react and typescript, where we have the following file structure:

.storybook
apps
  - app-which-uses-ui-components
  - app-which-doesnt-use-ui-component
packages
  - ui-components
  - package-which-uses-ui-components
  - package-which-doesnt-use-ui-component

Almost all our packages/apps use our ui-components-package and those who don't don't suffer if they are wrapped in our global ThemeProvider (which is exposed by the ui-components package).

This is how our setup looks:
preview.js

import {
  GlobalStyle,
  Fonts,
  RootThemeProvider,
} from "../packages/ui-components";

export const decorators = [
  (Story) => (
    <RootThemeProvider>
      <Fonts />
      <GlobalStyle />
      <Story />
    </RootThemeProvider>
  ),
];

Everything works fine and we are able to easily create a story in each app/package, except for some of the stories defined in the ui-components-package itself. Some of these stories are using help-functionality provided by a context which is rendered in RootThemeProvider.

I've made some investigations, and it seems as when preview.js imports RootThemeProvider it gets a pre-compiled version from the dist-folder of that package, but when the story tries to consume the context it will try to find the context created by the compilation that storybook does (which doesn't exist in the component tree).

So a little bit of a complex case, but is my use case supported? Or should I try to move the responsibility of the decorators closer to the story definition? A drawback with that is that I need to define that decorator in every story which would be a hassle. I would really want to just be able to create a story without knowing the implementation details regarding the whole storybook-setup

[shilman]

I don't understand the issue but I'll leave this here in case it helps:

https://storybook.js.org/docs/react/workflows/storybook-composition

This would allow you to create two ore more separate storybooks. The benefit of splitting up the Storybooks is that it would be possible to customize the configuration for each project separately as needed. Composition would then allow you to view them from a single URL. Hope that helps!

[jonesmac]

We struggle with the exact same issue with our setup. The link in the post above seems to be here - https://storybook.js.org/docs/react/sharing/storybook-composition but composition doesn't seem to really be the issue. Its exactly as the OP describes. When trying to use context across workspaces, there are duplicates created and useContext hooks (even within the same story) don't see the same references depending how how the hooks get imported (i.e. relative to the story vs from a different workspace.