[Bug]: Multiple versions of emotion in docs leads to theme error

[tmeasday]

Describe the bug

In a project without an explicit emotion dependency (in fact no version of emotion in node_modules), visiting docs, I see two warnings:

You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used.

Then many errors:

Uncaught TypeError: Cannot read properties of undefined (reading 'secondary')
....

The above error occurred in the <IconButton> component:
....

etc

To Reproduce

1. Clone https://github.com/tmeasday/inkline/tree/upgrade
2. npm i
3. yarn storybook
4. Visit a docs page.

Explanation

The issue is due to a dependency on @storybook/theming@6.5.9 being hoisted and so multiple versions of @storybook/theming@7 being created inside each dependent package.

[tmeasday]

@ndelangen I think the reason is that the project has a dependency on @storybook/theming@6.5.9 due to @storybook/testing-library@^0.0.14-next.0 and that is the version being hoisted.

[tmeasday]

I resolved via adding a direct dependency on @storybook/theming@next.

[tmeasday]

This was fixed by storybookjs/testing-library#30, (@storybook/testing-library@^0.0.14-next.1) thanks @yannbf !

[ndelangen]

This could still happen in the real world, not super likely, but possible..
I'm wondering if further action on (perhaps the builder level) is warranted?

I could make the builder alias it, and ensure a single version.

Alternatively, perhaps there's a way to ensure the theming libs never clash, and also do not check for global existence. But I

If I understand the issue correctly, @tmeasday you have 2 version of @storybook/theming and they are used in the same react-v-dom, and were supposed to be the same version. if they are completely independent they'd 1 would not get the proper theme.

[tmeasday]

We can reopen if you like @ndelangen but I'd say let's wait to see if it comes from users before doing anything about it.

In the above case, it was a totally standard installation that led to two different versions of @storybook/theming, and when the wrong one was hoisted, we had problems. Now the testing-lib package is updated that won't happen any more.

[yannbf]

We can reopen if you like @ndelangen but I'd say let's wait to see if it comes from users before doing anything about it.

In the above case, it was a totally standard installation that led to two different versions of @storybook/theming, and when the wrong one was hoisted, we had problems. Now the testing-lib package is updated that won't happen any more.

Is it also possible this could happen from community addons which are not updated to support SB 7.0 yet?

[ndelangen]

Yes, it could happen that way indeed @yannbf

[sljuka]

After upgrading to v7 (Loving the new version btw ❤️ ) I am seeing this error:

It only shows up when going to the docs (autodocs) story. The design system lib is not using emotion, but it's in a monorepo with other libs that are using emotion that might be clashing with storybook's internals.
Relevant npm ls from lib's root:

 ├── @storybook/addon-a11y@7.0.4
  ├── @storybook/addon-essentials@7.0.4
  ├── @storybook/addon-interactions@7.0.4
  ├── @storybook/addon-links@7.0.4
  ├── @storybook/blocks@7.0.4
  ├── @storybook/react-vite@7.0.4
  ├── @storybook/react@7.0.4
  ├── @storybook/theming@7.0.4
  ├── @vanilla-extract/vite-plugin@3.8.0
  ├── @vitejs/plugin-react@3.1.0
  ├── chromatic@6.17.3

npm ls from monorepo root:

│ ├── @storybook/addon-a11y@7.0.4
│ ├── @storybook/addon-essentials@7.0.4
│ ├── @storybook/addon-interactions@7.0.4
│ ├── @storybook/addon-links@7.0.4
│ ├── @storybook/blocks@7.0.4
│ ├── @storybook/react-vite@7.0.4
│ ├── @storybook/react@7.0.4
│ ├── @storybook/theming@7.0.4
...
│ ├── @emotion/react@11.10.6 deduped
│ ├── @emotion/styled@11.10.6 deduped

Both Adding @storybook/theming package explicitly and removing @storybook/testing-library did not fix the issue.

[sljuka]

You are loading @emotion/react when it is already loaded. Running multiple instances...

Right, I'm also seeing this warning before the first error

[sljuka]

Fixing all @storybook related packages to 7.0.4 (without caret ^) fixed the package clash. This is not best practice since I'm missing out on minor version changes. There is probably no need to fix versions on all @storybook packages but I would need to experiment to find out.
With Tailwind, Vanilla-extract and other "0-runtime" css-in-js libs becoming popular, perhaps it would be good if SB migrated away from runtime styling libs like emotion.