storybook: Storybook + Chakra UI V1 not displaying styles

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",
        },
      },
    };
  },
};

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

I was able to work around this by implementing a custom webpackFinal config: https://github.com/chakra-ui/chakra-ui/issues/2527#issuecomment-728134371

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

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.

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

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!

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