Storybook 6.1.0-rc.4 & Emotion 11.0 support #13145

glomotion · 2020-11-17T03:46:57Z

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

Init a basic storybook
Install @emotion/css and @emotion/babel-plugin
setup a basic component which uses { css } from @emotion/css
do npm run build-storybook
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

The text was updated successfully, but these errors were encountered:

shilman · 2020-11-17T07:58:31Z

Does this workaround help? chakra-ui/chakra-ui#2527 (comment)

glomotion · 2020-11-17T22:31:22Z

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 · 2020-11-17T22:33:58Z

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 · 2020-11-18T21:29:08Z

@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 · 2020-11-30T10:43:51Z

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 · 2020-11-30T10:48:28Z

looks like this is being worked on atm. #13300

mavlikwowa · 2020-12-25T12:01:33Z

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 · 2021-01-09T01:25:47Z

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 · 2021-01-09T13:39:08Z

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 · 2021-01-10T23:30:10Z

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 · 2021-01-12T01:21:12Z

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 · 2021-01-12T12:22:05Z

I successfully managed to do this in the Next Right Now boilerplate, at UnlyEd/next-right-now#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 · 2021-01-15T17:46:26Z

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 · 2021-03-04T13:19:28Z

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

mikebarkmin · 2021-03-04T13:23:30Z

@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 · 2021-03-05T09:14:37Z

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.

akd-io · 2021-03-05T10:26:40Z

Thank you for looking into this @shilman!

Domiii · 2021-12-12T09:39:23Z

@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 · 2021-12-12T14:16:32Z

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 · 2021-12-12T14:42:49Z

@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 · 2021-12-12T16:51:50Z

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 · 2021-12-13T11:21:48Z

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

robinmetral · 2021-12-13T11:41:10Z

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 · 2021-12-16T00:17:40Z

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 · 2022-01-09T03:17:43Z

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 · 2022-01-14T07:16:57Z

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 · 2022-01-14T08:56:35Z

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:

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.
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?
Can you maybe explain what needs to be done s.t. storybook can work without the dependency conflict causing errors?

griffithstek · 2022-01-28T22:46:58Z

Switching to @storybook/theming did the trick for me. So my preview.js looks like this:

import { ThemeProvider } from "@storybook/theming"
import theme from "../src/theme"

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

shilman · 2022-01-30T14:42:46Z

FYI we are working on a proper fix for this--not a workaround--hopefully arriving in the next few days.

Domiii · 2022-01-31T08:58:45Z

rocket emoji

Grimones · 2022-01-31T17:45:22Z

Hi guys. Not sure if this issue is related to this but at least it's about emotion and storybook. If it will make sense I'll open a new issue.

The issue is happening when you are using emition@11 alongside with storybook. When you define a theme shape in emotion.d.ts to have proper typings of theme in different places (css props, styled component, etc) when an import of storybook appears in stories file then typing breaks for css props (haven't checked that in other theme usecases).

We are using in project nx and it has some additional configuration of how files are compiled and it leads to breaking theme typing even if storybook imports appears in differrent file.

Here is a repo with reproduction
You don't need to run anything just make sure that you do yarn to install deps.

In apps/test/src/app/app.tsx we expect this to be

If there is any import storybook in *.stories.* files theme typing changes to this

After fun hours of debugging I found out that issue happens because emotion@10 used in storybook/theming in file node_modules/@emotion/core/types/index.d.ts. If you comment out line 84 and 96 (css?: InterpolationWithTheme<any>) it's starts to work.

Here is also a minimal repro in codesandbox
But due to limitation of configuration (not having babelrc and time to wire some create-react-app config changes) I'm using jsx pragma to enable css prop functionality and issues happens only if storybook import happens in the same file also causing issue in other files.

I'm not sure what possible solutions could be, like enforcing types from emotion 11, I'll appreciate any suggestions on how it could be hotfixed. Casting css={(theme: Theme) => ...} works in this minimal reproduction but for some reason it's not working in real codebase.

I'm feeling that issue lies in storybook land as it seems to be only one proper way is to bump emotion version in storybook packages to fix those type conflicts. Unless I'm missing something.

Update:
After more digging found more related issues in emotion repo
emotion-js/emotion#1257
emotion-js/emotion#1800

Fix is in emotion@11 but there are some suggestion on hotfixing storybook with emotion@10

shilman · 2022-02-01T13:35:10Z

Hurrah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.31 containing PR #17000 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

flo-sch · 2022-02-01T16:32:03Z

I just tried with v6.5.0-alpha.32, using the following .storybook/main.js config:

module.exports = {
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
  features: {
    emotionAlias: false,
  },
  addons: [
    // ...
  ]
};

And I can confirm that I can successfully:

render emotion v11 components (in my case, theme-ui components)
write a global decorator rendering a custom <ThemeProvider />

Very great improvement @shilman @ndelangen, thanks a lot guys 🙌

Furizaa · 2022-02-09T15:47:03Z

@storybook/[email protected] still has a built in emotion@^10 dependency.

flo-sch · 2022-02-09T15:56:09Z

Yes, if I follow the thread, I think migrating to @emotion v11 is still a BC breaking change and cannot be achieved in Storybook v6.

That fix though should solve conflict problems between the emotion version used by Storybook and the one used by your own UI library :)

matheusslg · 2022-02-23T21:22:17Z

Hey guys, I was facing the same problem and I tried so many things that I didn't remember how much time I've spent to fix this, and finally, I figured out how to build Storybook + Emotion 11 properly. Before we continue, I just want to say that I'm working on a shared lib component with Emotion 11 + Storybook + JEST + Babel.

First I updated the Storybook version to the pre-release as @shilman told above:

npx sb upgrade --prerelease

Here is my package.json after the upgrade:

    "@storybook/addon-a11y": "^6.5.0-alpha.41",
    "@storybook/addon-actions": "^6.5.0-alpha.41",
    "@storybook/addon-docs": "^6.5.0-alpha.41",
    "@storybook/addon-essentials": "^6.5.0-alpha.41",
    "@storybook/addon-links": "^6.5.0-alpha.41",
    "@storybook/addon-storyshots": "^6.5.0-alpha.41",
    "@storybook/addon-storysource": "^6.5.0-alpha.41",
    "@storybook/addons": "^6.5.0-alpha.41",
    "@storybook/node-logger": "^6.5.0-alpha.41",
    "@storybook/react": "^6.5.0-alpha.41",
    "@storybook/testing-react": "^1.2.3",
    "@storybook/theming": "^6.5.0-alpha.41",

I also have these peerDependencies:

  "peerDependencies": {
    "@emotion/react": "^11.5.0",
    "@emotion/styled": "^11.3.0",
    "@types/react": "^16.8.6 || ^17.0.0",
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },

After that, I changed my storybook config to look like this:

.storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|mdx|tsx)'],
  framework: '@storybook/react',
  core: {
    builder: 'webpack4',
    channelOptions: { allowFunction: false, maxDepth: 10 }
  },
  features: {
    emotionAlias: false
  },
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-storysource',
    { name: '@storybook/addon-docs', options: { configureJSX: true } },
    '@storybook/addon-controls'
  ],
  webpackFinal: async config => {
    // React preset + Emotion props
    config.module.rules[0].use[0].options.presets = [
      require.resolve('@babel/preset-react'),
      require.resolve('@babel/preset-env'),
      require.resolve('@emotion/babel-preset-css-prop')
    ];

    return config;
  }
};

Hope this helps you guys!

shilman added compatibility with other tools question / support theming labels Nov 17, 2020

mverissimo mentioned this issue Nov 26, 2020

Storybook throw error if used emotion 11 #13277

Closed

Andarist mentioned this issue Dec 10, 2020

@types/react conflict for @types/[email protected] emotion-js/emotion#2167

Closed

shilman mentioned this issue Dec 21, 2020

Storybook 7.0 #13491

Closed

5 tasks

shilman added dependencies maintenance User-facing maintenance tasks and removed question / support labels Jan 13, 2021

oliviertassinari mentioned this issue Jan 21, 2021

Custom theme not propagated within Storybook.js mui/material-ui#24282

Closed

2 tasks

illinar mentioned this issue Jan 25, 2021

Can't get emotion's css prop working inside storybook #7540

Closed

shilman mentioned this issue Mar 9, 2021

UI: Upgrade to Emotion 11 #13300

Closed

flo-sch mentioned this issue Mar 26, 2021

[Snyk] Upgrade: react, react-dom wearehumblebee/honeycomb#9

Closed

rrsai mentioned this issue Dec 3, 2021

5.0.0-rc4 - cannot read property 'secondary' of undefined #5706

Closed

stale bot added the inactive label Jan 9, 2022

shilman removed this from the 6.4 improvements milestone Jan 10, 2022

shilman added the todo label Jan 10, 2022

stale bot removed inactive labels Jan 10, 2022

shilman mentioned this issue Jan 10, 2022

outdated peer deps when using react 17 #16799

Closed

mannycarrera4 mentioned this issue Jan 27, 2022

chore: Upgrade to emotion 11, typescript 4.1 and necessary linting deps Workday/canvas-kit#1442

Merged

shilman mentioned this issue Jan 30, 2022

Core: Pre-bundle @storybook/theming to avoid emotion11 conflicts #17000

Merged

5 tasks

shilman closed this as completed Feb 1, 2022

swcho mentioned this issue Mar 17, 2022

fix-storybook-emotion-11-error/ blurfx/xo.dev#20

Closed

Storybook 6.1.0-rc.4 & Emotion 11.0 support #13145

Storybook 6.1.0-rc.4 & Emotion 11.0 support #13145

Comments

glomotion commented Nov 17, 2020 • edited by sync-by-unito bot Loading

shilman commented Nov 17, 2020

glomotion commented Nov 17, 2020 • edited Loading

glomotion commented Nov 17, 2020

guilhermewaess commented Nov 18, 2020 • edited Loading

glomotion commented Nov 30, 2020 • edited Loading

glomotion commented Nov 30, 2020

mavlikwowa commented Dec 25, 2020

istrupin commented Jan 9, 2021 • edited Loading

mavlikwowa commented Jan 9, 2021

glomotion commented Jan 10, 2021

istrupin commented Jan 12, 2021 • edited Loading

Vadorequest commented Jan 12, 2021 • edited Loading

mikeytown19 commented Jan 15, 2021

My Fix

pixelass commented Mar 4, 2021

mikebarkmin commented Mar 4, 2021 • edited Loading

shilman commented Mar 5, 2021 • edited Loading

akd-io commented Mar 5, 2021

Domiii commented Dec 12, 2021 • edited Loading

My Versions

Error

Analysis

tchalvak commented Dec 12, 2021

Domiii commented Dec 12, 2021

robinmetral commented Dec 12, 2021 • edited Loading

Domiii commented Dec 13, 2021

robinmetral commented Dec 13, 2021

souleymanedembele commented Dec 16, 2021

stale bot commented Jan 9, 2022

andrerpena commented Jan 14, 2022

Domiii commented Jan 14, 2022 • edited Loading

griffithstek commented Jan 28, 2022

shilman commented Jan 30, 2022

Domiii commented Jan 31, 2022

Grimones commented Jan 31, 2022 • edited Loading

shilman commented Feb 1, 2022

flo-sch commented Feb 1, 2022

Furizaa commented Feb 9, 2022

flo-sch commented Feb 9, 2022

matheusslg commented Feb 23, 2022

glomotion commented Nov 17, 2020 •

edited by sync-by-unito bot

Loading

glomotion commented Nov 17, 2020 •

edited

Loading

guilhermewaess commented Nov 18, 2020 •

edited

Loading

glomotion commented Nov 30, 2020 •

edited

Loading

istrupin commented Jan 9, 2021 •

edited

Loading

istrupin commented Jan 12, 2021 •

edited

Loading

Vadorequest commented Jan 12, 2021 •

edited

Loading

mikebarkmin commented Mar 4, 2021 •

edited

Loading

shilman commented Mar 5, 2021 •

edited

Loading

Domiii commented Dec 12, 2021 •

edited

Loading

robinmetral commented Dec 12, 2021 •

edited

Loading

Domiii commented Jan 14, 2022 •

edited

Loading

Grimones commented Jan 31, 2022 •

edited

Loading