Storybook 6.1.0-rc.4 & Emotion 11.0 support

[glomotion]

Describe the bug When you upgrade emotion (@emotion/css) to version 11.0 - storybook seems to build successfully, but on every single set of stories, simply renders this error screen:

To Reproduce

1. Init a basic storybook
2. Install @emotion/css and @emotion/babel-plugin
3. setup a basic component which uses { css } from @emotion/css
4. do npm run build-storybook
5. See error:

css is not defined
ReferenceError: css is not defined
    ...

Code snippets

//./storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-knobs',
  ],
  typescript: { reactDocgen: 'react-docgen' },
};

System

$ npx sb@next info

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
    Yarn: 1.19.0 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.15.1/bin/npm
  Browsers:
    Chrome: 86.0.4240.198
    Edge: 86.0.622.69
    Firefox: 82.0.3
    Safari: 14.0.1
  npmPackages:
    @storybook/addon-actions: ^6.1.0-rc.4 => 6.1.0-rc.4 
    @storybook/addon-essentials: ^6.1.0-rc.4 => 6.1.0-rc.4 
    @storybook/addon-knobs: ^6.1.0-rc.4 => 6.1.0-rc.4 
    @storybook/addon-links: ^6.1.0-rc.4 => 6.1.0-rc.4 
    @storybook/react: ^6.1.0-rc.4 => 6.1.0-rc.4 

[shilman]

Does this workaround help? https://github.com/chakra-ui/chakra-ui/issues/2527#issuecomment-728134371

[glomotion]

sadly no. :(

// ./storybook/main.js

const path = require('path');
const toPath = _path => path.join(process.cwd(), _path);

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-knobs',
  ],
  typescript: { reactDocgen: 'react-docgen' },
  webpackFinal: async config => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          '@emotion/css': toPath('node_modules/@emotion/css'),
          '@emotion/core': toPath('node_modules/@emotion/react'),
          'emotion-theming': toPath('node_modules/@emotion/react'),
        },
      },
    };
  },
};

[glomotion]

FYI - i'm not actually using any emotion theming atm. I'm simply using the "framework agnostic" flavour of emotion (https://emotion.sh/docs/introduction)

[guilhermewaess]

@shilman just putting more info here, I also need to update my lib to emotion-11 and my problem lies on import styled from '@emotion/styled';

Analysing the final bundled code from storybook, looks like the webpack is serving the old styled package instead of the new one:

As you can see on the following image running the SB with Emotion-11, the path is pointing to the old version of emotion.

The expected path should be: node-modules/@emotion/styled/something.

The problem might be here? https://github.com/storybookjs/storybook/blob/next/lib/theming/paths.js

The current side effect of this in my project is: because internally, the ThemeProvider is using the @emotion/styled/base and the storybook webpack is providing @emotion/styled-base, the Theme won't match and will be always empty theme: {};

[glomotion]

FWIW - When running with all updated deps (as above) and the following alias inside .storybook/main.js:

'@emotion/css': toPath('node_modules/@emotion/css'),

i get the following logs when starting storybook:

WARNING in ./node_modules/@storybook/theming/node_modules/@emotion/core/dist/core.browser.esm.js 10:0-46
"export 'default' (reexported as 'css') was not found in '@emotion/css'
 @ ./node_modules/@storybook/theming/dist/index.js
 @ ./node_modules/@storybook/components/dist/bar/button.js
 @ ./node_modules/@storybook/components/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js
 @ ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js

[glomotion]

looks like this is being worked on atm. https://github.com/storybookjs/storybook/pull/13300

[mavlikwowa]

I changed webpack.config in Storybook and it helped! `const path = require("path")

const toPath = (_path) => path.join(process.cwd(), _path)

module.exports = { stories: ['../stories/*/.stories.@(ts|tsx|js|jsx)'], addons: ['@storybook/addon-links', '@storybook/addon-essentials'], // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration typescript: { check: true, // type-check stories during Storybook build }, webpackFinal: async (config) => { return { ...config, resolve: { ...config.resolve, alias: { ...config.resolve.alias, "@emotion/core": toPath("node_modules/@emotion/react"), // You should add this row "@emotion/styled": toPath("node_modules/@emotion/styled"), "emotion-theming": toPath("node_modules/@emotion/react"), }, }, } }, }; `

[istrupin]

Still not working for me either. I'm getting this error:

ERROR in ./src/components/basic/Daas-Upload.js Module not found: Error: Can't resolve '@emotion/styled/base' in '/Users/istrupin/code/daas-web/src/components/basic'

My main.js:

const path = require('path');
const toPath = (_path) => path.join(process.cwd(), _path)
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
  ],
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../src/styles'),
    });
    config.plugins.push(new MiniCssExtractPlugin());

    config.resolve.alias = {
      ...config.resolve.alias,
      "@emotion/core": toPath("node_modules/@emotion/react"),
      "@emotion/styled": toPath("node_modules/@emotion/styled"),
      "emotion-theming": toPath("node_modules/@emotion/react"),

    };

    console.log(config.resolve.alias);
    return config;
  },
};

And inside my failing module:

import React from 'react'
import {useDropzone} from 'react-dropzone'
import styled from '@emotion/styled'

const Container = styled.div`
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-width: 2px;
  border-radius: 2px;
  border-color: ${props => getColor(props)};
  border-style: dashed;
  background-color: #fafafa;
  color: #bdbdbd;
  outline: none;
  transition: border .24s ease-in-out;
`;

[mavlikwowa]

I published my package on npm (mavlikwowa.ui) and github: https://github.com/mavlikwowa/mavlikwowa.ui You can compare your emotion versions in package.json and other settings. May be it can help you. Unfortunately, I can`t guess why your error happens whitout an addirional information.

[glomotion]

So somehow, by splitting storybook out from the components repo that utilises it, i now no longer see any of these issues.

So I feel like from my end, this ticket can be closed.

[istrupin]

I published my package on npm (mavlikwowa.ui) and github: https://github.com/mavlikwowa/mavlikwowa.ui You can compare your emotion versions in package.json and other settings. May be it can help you. Unfortunately, I can`t guess why your error happens whitout an addirional information.

Thanks for sharing that link. My versions are:

"@emotion/babel-plugin": "^11.1.2",
"@emotion/react": "^11.1.4",
"@emotion/styled": "^10.0.27",
 "@storybook/addon-actions": "^6.2.0-alpha.10",
 "@storybook/addon-essentials": "^6.2.0-alpha.10",
 "@storybook/addon-links": "^6.2.0-alpha.10",
 "@storybook/preset-scss": "^1.0.3",
 "@storybook/react": "^6.2.0-alpha.10",

My alias block is identical to yours, but they are not being honored. @mavlikwowa can I assist in any way by providing you any specific additional information?

[Vadorequest]

I successfully managed to do this in the Next Right Now boilerplate, at https://github.com/UnlyEd/next-right-now/pull/251 (I wasn't aware of this issue until now). Next Right Now uses Emotion 11, while its associated Storybook uses Emotion 10, this complicates things. (see Note below)

Here are my findings:

The underlying issue is due to Emotion 11 webpack configuration, which can use a Babel setup in either classic or automatic modes, or JSX pragma.

JSX pragma requires /* @jsx jsx */ per file and is a bad way to solve this issue for end-users. Babel with automatic mode isn't compatible with MDX and will break part of Storybook. Babel with classic mode is the only correct way to configure babel.

Creating a .storybook/babel.config.js should fix the css issue. It's important to split the Next.js babel config from Storybook babel config. They don't need the same things. (My Next.js use Babel automatic mode, while SB Babel uses classic mode)

Note that my setup works (compiles, both localhost and on Github actions) and can export a static version successfully, although there are a few TS errors because Next Right Now uses Emotion v11 while Storybook uses Emotion v10 and there are some type clashing. Surprisingly, they don't break the build, and my plan is to ts-ignore them manually (there are less than a dozen in NRN). I believe a proper fix could be done (with d.ts types or something) but couldn't figure it out. (my idea was to convert css?: InterpolationWithTheme<any> to css?: any, and it does work when editing node_modules/@emotion/core/types/index.d.ts directly, but I couldn't override it properly)

/**
 * Babel configuration for Storybook
 *
 * Doesn't affect Next.js babel configuration, specific file for Storybook only.
 * Need to apply Emotion babel configuration, otherwise Emotion "css" cannot be used in Storybook.
 *
 * XXX We use the "classic" way instead of the "automatic" way for Storybook, that's because MDX isn't compatible with "automatic".
 *
 * @see https://emotion.sh/docs/css-prop#babel-preset Configuring Emotion 11
 */
module.exports = {
  "presets": ["@emotion/babel-preset-css-prop"]
};

If this fix doesn't work for you, or you encounter issues, I suggest studying what I did at https://github.com/UnlyEd/next-right-now/pull/251/commits (commit by commit), in particular:

• 60fc245 (#251) reverted attempt to use automatic mode, worked but broke MDX stories
• 86c7851 (#251) use classic mode, fixed MDX

[mikeytown19]

I fell into a similar issue but it was with ThemeProvider.

//.storybook/preview.js

import * as React from 'react'
import { ThemeProvider } from '@emotion/react' 

import theme from '../src/utils/theme'

export const decorators = [
  (Story) => (
    <ThemeProvider theme={theme}>
      <Story />
    </ThemeProvider>
  ),
]

blue Is a color that is being accessed through the theme, but I don't have access to the theme inside of the storybook.

The issue I think is that my Wrapper Component that uses ThemeProvider as well is interfering somehow.

//src/components/Wrapper/index.js

import * as React from 'react'
import { ThemeProvider } from '@emotion/react' 

import theme from '../src/utils/theme'

const Wrapper = ({ children }) => <ThemeProvider theme={theme}>{children}</ThemeProvider>

export default Wrapper

My Fix

//.storybook/preview.js

import * as React from 'react'
import { ThemeProvider } from '@storybook/theming' 

import theme from '../src/utils/theme'

export const decorators = [
  (Story) => (
    <ThemeProvider theme={theme}>
      <Story />
    </ThemeProvider>
  ),
]

By using this import { ThemeProvider } from '@storybook/theming' I'm not getting the error anymore and it seems to be working for now.

package.json

  "@emotion/styled": "^11.0.0",
  "@emotion/react": "^11.1.3",
  "@storybook/theming": "^6.1.14",

https://storybook.js.org/docs/react/configure/theming

Sorry in advance that my grammar is complete poo.

[pixelass]

@shilman Is this issue being worked on? Sadly we'll have to drop Storybook unless this gets fixed

[mikebarkmin]

@pixelass you can take a look at this repository: https://github.com/openpatch/patches. In this repository I have a working storybook 6.1.21 and emotion 11. Take a look at the main.ts for how I have setup it up: https://github.com/openpatch/patches/blob/main/.storybook/main.ts.

[shilman]

This is a breaking change to Storybook 6.x users so the workaround will have to do for the moment.

It seems like this is a major obstacle for users, and I see two possible paths forward:

Direct support. There is an open PR for Emotion 11 https://github.com/storybookjs/storybook/pull/13300, and I could merge this and release it as an early 7.0 prerelease while the 6.x proceeds as scheduled. I don't think this is realistic. We could also release 7 earlier, which also conflicts with our plans.

Custom theming. There is also a staled-out PR for a custom theming implementation: https://github.com/storybookjs/storybook/pull/10438. This is nice because it should eliminate this conflict in both the short and long term, even as Storybook/Emotion evolve on different timelines. I'll try to prioritize this as part of 6.3.

[akd-io]

Thank you for looking into this @shilman!

[shilman]

As follow-up, let's be sure to check these two issues: https://github.com/storybookjs/storybook/issues/13114 https://github.com/storybookjs/storybook/issues/12114

[seniorquico]

We're using Yarn v2 with the PNP resolver. The workaround mentioned above is good, but we couldn't use a hardcoded node_modules file path... just swapped it out for require.resolve.

package.json snippet:

    "@emotion/react": "11.1.5",
    "@emotion/styled": "11.3.0",
    "@storybook/...": "6.2.9",

main.js snippet:

const path = require('path')

module.exports = {
  webpackFinal: async (config) => {
    const emotionReactEleven = path.dirname(require.resolve('@emotion/react/package.json'))
    const emotionStyledEleven = path.dirname(require.resolve('@emotion/styled/package.json'))
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          '@emotion/core': emotionReactEleven,
          '@emotion/styled': emotionStyledEleven,
          'emotion-theming': emotionReactEleven,
        },
      },
    }
  },
}

We still needed to use the Storybook theme provider:

import { ThemeProvider } from '@storybook/theming'

Everything appears to be working as expected. We haven't yet identified anything negative using this setup. Thanks for those that helped pave the way with the workaround.

[pixelass]

FYI. We're using this in a lerna-monorepo setup and decided to drop storybook since we were wasting too much time "trying" to get it to work without any success. If anybody has an idea/mvp for lerna monorepos we'd be happy if anyone could share.

[seniorquico]

FYI. We're using this in a lerna-monorepo setup and decided to drop storybook since we were wasting too much time "trying" to get it to work without any success. If anybody has an idea/mvp for lerna monorepos we'd be happy if anyone could share.

Lerna is just a wrapper on top of npm/yarn for the actual package installation & resolution. The workarounds posted above should be the same in a Lerna project.

[SimeonC]

I've been using the workaround almost exactly the same as @seniorquico posted successfully in several lerna mono-repo's without problem. I guess you might have trouble if you were trying to have multiple storybook installs for each sub-package, in which case the dependency hoisting would probably cause you issues. As long as you use one storybook install and config at top level you should be fine.

[osdiab]

The two PRs above seem to have gone stale - would love an update / if there's a way to help would love to know!

[flo-sch]

We're using Yarn v2 with the PNP resolver. The workaround mentioned above is good, but we couldn't use a hardcoded node_modules file path... just swapped it out for require.resolve.

Just to confirm, that configuration also work with yarn v1 in a monorepo 🎉 (with React v17, Emotion v11, Storybook v6.3, typescript v4.3 & webpack v5)

[Domiii]

This is a breaking change to Storybook 6.x users so the workaround will have to do for the moment.

It seems like this is a major obstacle for users, and I see two possible paths forward:

Direct support. There is an open PR for Emotion 11 #13300, and I could merge this and release it as an early 7.0 prerelease while the 6.x proceeds as scheduled. I don't think this is realistic. We could also release 7 earlier, which also conflicts with our plans.

Custom theming. There is also a staled-out PR for a custom theming implementation: #10438. This is nice because it should eliminate this conflict in both the short and long term, even as Storybook/Emotion evolve on different timelines. I'll try to prioritize this as part of 6.3.

Any updates on this? Can you upgrade @emotion? Or what would be an argument against that? Having to maintain all branches in two different versions is a bit hasslesome - one with resolutions set to @emotion@10 for storybook, and one set to @emotion@11 for non-storybook, so we can use other libraries that depend on @emotion@11 (we are using this work around.) :/

[shilman]

We are going to change the way we do theming in 7.0, either by upgrading Emotion or possibly switching to a different theming library. In the meantime our hands are somewhat tied as described above.

[stephenh]

FWIW / just musing, but it'd be great if Storybook could somehow bundle/shadow its dependencies (granted, supporting plugins makes that hard).

But as a user I really don't care what CSS-in-JS/etc. libraries that Storybook uses, I just want to use it as a standalone deliverable, and not have it futz with dependencies in my primary app.

Just thinking out loud, but maybe eventual best-practice would be for storybook to be invoked npx and/or a separate package.json than the app's primary package.json, to ensure that conflicts like this fundamentally would never happen? (I can dream :-D)

[shilman]

@stephenh Our long-term solution is to pre-bundle Storybook's entire UI, which should solve some compatibility issues and also have a lot of performance benefits. It has a bunch of implications for how addons work, however, so it's a whole project. I hope we can tackle it soon.

[shilman]

@ndelangen "we should experiment removing the webpack aliases for emotion so that people can try installing their own version of emotion alongside ours."

Long-term solution: remove docs from the preview in 7.x

[shihfu]

Possible to get a rough ETA on this issue? We're debating rolling back to v10, but that may cause dependency issues. If a fix is on the horizon, we can wait it out.

[shilman]

@shih-js i think a proper solution is months out. however, there's a promising workaround that i'm thinking about packaging into 6.4 that might do the trick for most people. i should have something in the next couple weeks.

[akd-io]

@shih-js i think a proper solution is months out. however, there's a promising workaround that i'm thinking about packaging into 6.4 that might do the trick for most people. i should have something in the next couple weeks.

Here to cheer you on if you try to implement a temporary workaround for 6.4. Understand if other stuff gets in the way, but it would be so much appreciated! Much love ❤️

[shilman]

It's happening thanks to @ndelangen 🎉🎉🎉

[rrsai]

Hey, we just got bit by this bug, none of the various workarounds have worked to be able to reconcile emotion 10 in storybook and emotion 11 in our app, resulting in a very difficult to resolve breakage in storybook. The actual app has been using emotion for months, so the breakage effects storybook theme usage and would be quite difficult organizationally to rollback within the actual production app.

[shilman]

@rrsai did you try this one? https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#emotion11-quasi-compatibility

[rrsai]

@shilman Hey, thanks for the speedy response, checking out to see if that works for us with yarn workspaces now... will report back here.

[rrsai]

@shilman Unfortunately, that doesn't seem to be resolving the issue while using yarn.

module.exports = {

• emotionAlias: false, stories: ['../src/*/.stories.@(ts|tsx)'], addons: ['@storybook/addon-links', '@storybook/addon-essentials'], typescript: { @@ -16,4 +25,18 @@ module.exports = { propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true), }, }, Stopped storybook and restarted, and still get:

And:

So essentially the clashing errors that got me to here.

[rrsai]

@shilman Is there a step that I'm missing beyond toggling off that feature flag to recompile storybook in the right way?

Versions running: node -v v16.13.0

yarn -v 1.23.0-20210726.1745

y list @storybook/react yarn list v1.23.0-20210726.1745 warning Filtering by arguments is deprecated. Please use the pattern option instead. └─ @storybook/react@6.4.4 Done in 1.56s.

y list @emotion/styled yarn list v1.23.0-20210726.1745 warning Filtering by arguments is deprecated. Please use the pattern option instead. ├─ @emotion/styled@11.6.0 └─ @storybook/theming@6.4.4 └─ @emotion/styled@10.0.27 Done in 1.59s.

[rrsai]

Ah, I looked thorugh the source and may be getting a mostly working result, the docs are slightly misleading: Instead of: module.exports = { emotionAlias: false ...

it has to be nested in features: module.exports = { features: { emotionAlias: false }, ...

I will try to make a PR for this to update that doc shortly.

[shilman]

@rrsai great catch. i updated it so that other people don't get stuck. 🙏

[Domiii]

@rrsai I have added features: { emotionAlias: false } to my main.js, but I still get the old errors. Can you reveal what you did?

My Versions

I am using yarn and overrode my dependencies in package.json like so:

{
  ....
  "resolutions": {
    "@storybook/**/@emotion/styled": "^11",
    "@storybook/**/@emotion/core": "^11",
    "@storybook/**/@emotion/sheet": "^1"
}

I got all @storybook/* at 6.4.9.

Also (from yarn.lock):

"@emotion/styled@^10.0.27", "@emotion/styled@^11":
  version "11.6.0"

"@emotion/core@^10.1.1", "@emotion/core@^11":
  version "11.0.0"

"@emotion/sheet@^1.0.1", "@emotion/sheet@^1.0.3":
  version "1.0.3"

Error

I get errors like the following:

vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-6ffe9c.manager.bundle.js:23114 Uncaught TypeError: Cannot read properties of undefined (reading 'content')
    at theming_dist_esm.styled.div.index (vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-6ffe9c.manager.bundle.js:23114)
    at emotion_serialize_browser_esm_handleInterpolation (vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-6ffe9c.manager.bundle.js:43921)
    at serializeStyles (vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-6ffe9c.manager.bundle.js:44046)
    at vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-6ffe9c.manager.bundle.js:44214
    at vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-6ffe9c.manager.bundle.js:43586
    at renderWithHooks (vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-6ffe9c.manager.bundle.js:100945)
    at updateForwardRef (vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-6ffe9c.manager.bundle.js:103004)
    at beginWork (vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-6ffe9c.manager.bundle.js:105058)
    at HTMLUnknownElement.callCallback (vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-6ffe9c.manager.bundle.js:89905)
    at Object.invokeGuardedCallbackDev (vendors-node_modules_storybook_addon-actions_dist_esm_register_js-node_modules_storybook_addo-6ffe9c.manager.bundle.js:89954)

Analysis

theme is { } (an empty object). The erroneous code tries to access some deeply nested props like so theme.level1.level2 which will of course fail. Do I have to somehow pre-populate the theme object or something?

[tchalvak]

I would not use the resolutions while the feature flag is in place @Domiii . In the end including only the :

module.exports = { features: { emotionAlias: false }, ...

…in main.js provided the correct behavior.

[Domiii]

@tchalvak If you don't force the version, how can you make sure, which version your build is currently using?

Can you please verify that you are on @emotion/*@>=11? E.g. yarn why @emotion/styled?

If you don't have @emotion/* of version 11+ in your build pipeline, then of course, you won't encounter any bugs...

[robinmetral]

FWIW, we also found that emotionAlias: false was not enough for Emotion compatibility in our project (using Emotion 11).

We upgraded to Storybook 6.4 (PR) and added the emotionAlias flag, but we had to keep Webpack aliases from Emotion 10 to Emotion 11 (mentioned in this thread before) around.

Not sure if this emotionAlias was supposed to replace other workarounds at all, but I felt that "quasi-compatibility" was overstating it a bit 😛

[Domiii]

@robinmetral Why do you alias core against react and emotion-theming against react?

[robinmetral]

Why do you alias core against react and emotion-theming against react?

I've tried to remove the aliases but it looks like Emotion can't find our theme afterwards 🤷 we had these for a while and they seem to work, so we figured that we'll keep them until proper compat instead of fighting with our config for hours 😛

[souleymanedembele]

Hello @robinmetral, I had a similar issue when setting up the storybook with the recent version and theme. However, there seems to be a conflict with versioning from the emotion theme provider and @storybook/theming version.

Storybook favored ThemeProvider from @storybook/theming instead of @emotion/react. Therefore, you may need to install a dev dependency for @storybook/theming. then import {ThemeProvider} from "@storybook/theming" instead. It works for me. ~Please see Link: https://storybook.js.org/docs/react/configure/theming

~Let me know if you have any issues!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[andrerpena]

I'm commenting here because the last comment was 29 days ago and stalebot is lurking! This issue is holding me from using Storybook =/

[Domiii]

It's happening thanks to @ndelangen 🎉🎉🎉

I'm also still very confused as to how to make the supposed workaround work?

I tried it and it errors out as described here because the theme is an empty object from what I understand.

To explain:

1. I don't care about emotion. I am not using it. I need this to work, because some other library requires emotion@11 and this causes a diamond dependency conflict.
2. The error I reported complains about lack of a theme. Note that we don't set a theme (because, again, we are not using emotion@11). Is there some sort of requirement to set a theme for this to work?
3. Can you maybe explain what needs to be done s.t. storybook can work without the dependency conflict causing errors?