Storybook polluting global type scope of non-storybook app

[dcastil]

Describe the bug

I discovered that TypeScript lets me set the css prop from Emotion on any components and DOM elements in my app. The problem is that I don't use Emotion at all in that app. The type is incorrect and would therefore break the app at runtime.

I'm writing this issue here because Storybook is depending on Emotion v10, causing the issue.

❯ yarn why @emotion/core
yarn why v1.22.11
[1/4] 🤔  Why do we have the module "@emotion/core"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@emotion/[email protected]"
info Reasons this module exists
   - "@storybook#addon-actions#@storybook#theming" depends on it
   - Hoisted from "@storybook#addon-actions#@storybook#theming#@emotion#core"
   - Hoisted from "@storybook#addon-essentials#@storybook#addon-docs#@storybook#builder-webpack4#@storybook#ui#@emotion#core"
info Disk size without dependencies: "576KB"
info Disk size with unique dependencies: "3.69MB"
info Disk size with transitive dependencies: "11.28MB"
info Number of shared dependencies: 42
✨  Done in 0.83s.

The problem is a known issue of Emotion v10 and was fixed in Emotion v11. So I think this could be solved by upgrading to Emotion v11 internally in Storybook.

To Reproduce

yarn create react-app storybook-app --template typescript
cd storybook-app
npx sb init

Now you can add a css prop to any React component in the storybook-app project.

Current workaround

I managed to fix it temporarily for myself by executing

rm node_modules/@emotion/core/types/index.d.ts

in a postinstall script.

System

Environment Info:

  System:
    OS: macOS 11.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.17.5 - /usr/local/bin/node
    Yarn: 1.22.11 - ~/.npm-global/bin/yarn
    npm: 7.21.0 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: 94.0.4606.81
    Firefox: 89.0
    Safari: 15.0
  npmPackages:
    @storybook/addon-actions: ^6.3.12 => 6.3.12 
    @storybook/addon-essentials: ^6.3.12 => 6.3.12 
    @storybook/addon-links: ^6.3.12 => 6.3.12 
    @storybook/node-logger: ^6.3.12 => 6.3.12 
    @storybook/preset-create-react-app: ^3.2.0 => 3.2.0 
    @storybook/react: ^6.3.12 => 6.3.12

Anyways, much ❤️ to Storybook. Love using it!

[dcastil]

Maybe related to #13491 as I see "Emotion@11" in there.

[shilman]

closing this as a dupe to #13145