Storybook + Chakra UI V1 not displaying styles

[MariuzM]

Describe the bug
With the new version of Chakra UI v1 storybook has stoped displaying styles, when doing yarn storybook it loads the page but does not display the styles.

Old version:

New version

Component

[shilman]

Do you have a repro repo you can share?

[MariuzM]

Here you go, it's all standard install https://github.com/MariuzM/bug_testing

[ivan-dalmet]

Same problem here (https://github.com/ivan-dalmet/start-ui)
I think it's the emotion 11. But no idea how to fix it :/

[ghost]

Same problem in a project with NextJS + Typescript + Chakra UI + Storybook.

[khanhleemtp]

Same problem

[lee-reinhardt]

I was able to work around this by implementing a custom webpackFinal config:
chakra-ui/chakra-ui#2527 (comment)

[MariuzM]

Any updates on getting this fixed?

[shilman]

@MariuzM PRs welcome!

[cloud-walker]

The fix should be to upgrade emotion to v11?

storybook/lib/ui/package.json

Line 30 in a5bd17f

"@emotion/core": "^10.1.1",

[SyedUmerHasan]

This issue is also happening with other libraries as well.
Can someone mention its root cause?

[florianmartens]

Same here.

[Cretezy]

Here is the solution that worked for me:

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

[lakshmimani]

Here is the solution that worked for me:

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

This worked for me

[agamm]

Here is the solution that worked for me:

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

Maybe npx sb init can check for chakraui and add this (working) fix automatically?

[anilanar]

Slight modification, @Cretezy's solution did not work for me. I had to add @emotion/styled to aliases but because there are multiple @emotion/styled versions present, I used absolute paths to make sure it refers to the correct one:

const path = require('path');

module.exports = {
  stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: async (config, { configType }) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          '@emotion/core': path.resolve(
            __dirname,
            '../node_modules/@emotion/react'
          ),
          'emotion-theming': path.resolve(
            __dirname,
            '../node_modules/@emotion/react'
          ),
          '@emotion/styled': path.resolve(
            __dirname,
            '../node_modules/@emotion/styled'
          ),
        },
      },
    };
  },
};
  

Make sure that node_modules/@emotion/styled is v11, not v10.

[rrsai]

After much debugging of the clash between versions of emotion used in storybook and in app, and for those who come after me, I found that storybook has now provided a feature flag to avoid clashing with later versions of emotion: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#emotion11-quasi-compatibility

[MariuzM]

I think web is going to start moving to https://stitches.dev/ :D

[stale]

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!

[shilman]

FYI, we'll hopefully have a proper fix out this week.

[shilman]

Boo-yah!! 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.