Using @storybook/theming in the preview imports emotion (and thus requires [email protected])

[tmeasday]

Describe the bug
It seems import { create } from '@storybook/theming' ends up requiring emotion.

The error you'll see is

Uncaught TypeError: Object(...) is not a function
    at Module../node_modules/@emotion/core/dist/core.browser.esm.js (core.browser.esm.js:15)
    at __webpack_require__ (bootstrap:781)
    at fn (bootstrap:149)
    at Module../node_modules/@emotion/styled-base/dist/styled-base.browser.esm.js (styled-base.browser.esm.js:1)
    at __webpack_require__ (bootstrap:781)
    at fn (bootstrap:149)
    at Module../node_modules/@emotion/styled/dist/styled.browser.esm.js (styled.browser.esm.js:1)
    at __webpack_require__ (bootstrap:781)
    at fn (bootstrap:149)
    at Object../node_modules/@storybook/theming/dist/index.js (index.js:9)

To Reproduce

1. Create a React@15 app
2. import { create } from '@storybook/theming' in .storybook/config.js

Expected behavior
create is a simple function it shouldn't need to require emotion?

System:

• Version: 5.0.0

[tmeasday]

Do we still need the emotion exports in base.ts? (animation / easing)? I was under the impression we weren't using them.

My proposal here is to create a lib/theming/preview.ts file which only imports/exports the non-emotion stuff. Then users can import { create } from '@storybook/theming/preview';

That seems like the back-compat way to fix this. A non-back compat way would be to remove the emotion exports from the index.ts entrypoint and add a second one for those.

[tmeasday]

Discussed this a little with @ndelangen (who is a little out-of-action the last day or so) and generally he agreed on the approach. I think he is better placed to pull the pieces apart here.

[shilman]

Closing this as a dupe to #6474 since I created a repro there (didn't realize this had already been filed otherwise I would've just added to this issue.

[github-actions]

Automention: Hey @domyen @ndelangen, you've been tagged! Can you give a hand here?