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
import { create } from '@storybook/theming' in .storybook/config.jsExpected behavior
create is a simple function it shouldn't need to require emotion?
System:
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.
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.
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.
Automention: Hey @domyen @ndelangen, you've been tagged! Can you give a hand here?