Chakra Storybook: TypeError "theme.background is undefined" (TypeScript / React)

Description

I recreated this issue in a fresh project, following steps to install the create-react-app template for Chakra and Typescript per docs, and the Chakra addon and @chakra-ui/icons also per Chakra docs along with initializing Storybook. Upon booting storybook, it appears that you able to see a component no issue, but when navigating to the docs tabs, The error ‘theme.background is undefined’ apppears, I switch back to the visual, and the error persists. In addition to the example stories that Storybook provides, I made a test component that uses a Chakra component and getting the same result.

Link to Reproduction

https://codesandbox.io/s/musing-monad-mrzmg

Steps to reproduce

A fresh project.

1. Run yarn create react-app my-app --template @chakra-ui/typescript
2. Run npx sb init
3. Run yarn add -D @chakra-ui/storybook-addon and yarn add @chakra-ui/icons per Chakra docs on Storybook
4. Added @chakra-ui/storybook-addon to .storybook/main.js per docs
5. Created a test component using two Chakra Components, and created a default story for this component.
6. Run yarn storybook
7. View a component (Storybook example or TestComponent)
8. Select the Docs tab if error did not appear immediately
9. Switch back to Canvas to see error persistence

No other configurations done.

Chakra UI Version

1.8.1

Browser

Firefox 96.0.3

Operating System

• macOS
• Windows
• Linux

Additional Information

@chakra-ui/storybook-addon v1.0.1

Is there supposed to be an extra step to satisfy TypeScript?

Screenshot:

[TylerAPfledderer]

Finally came back around to this! 😅

This was the solution for me, based on the aliasing from the linked shared by @srt4rulez and the use of toPath from the Chakra package 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-interactions",
    "@storybook/preset-create-react-app",
    "@chakra-ui/storybook-addon",
  ],
  framework: "@storybook/react",
  core: {
    builder: "@storybook/builder-webpack5",
  },
  // unpins Storybook's dependence on Emotion 10 so that build can compile successfully
  features: { emotionAlias: false },
  webpackFinal: async (config) => {
    // the emotion aliases ensure that only one context is loaded, without it the `useTheme` hook breaks
    // in storybook
    config.resolve.alias = {
      ...(config.resolve.alias ?? {}),
      "@emotion/react": toPath("node_modules/@emotion/react"),
      "@emotion/styled": toPath("node_modules/@emotion/styled"),
      "@emotion/core": toPath("node_modules/@emotion/react"),
      "emotion-theming": toPath("node_modules/@emotion/react"),
    };

    return config;
  },
};

[srt4rulez]

I fixed it for me by adding the alias’ from https://github.com/storybookjs/storybook/issues/16716#issuecomment-1020613602

It seems that https://github.com/storybookjs/storybook/pull/17000 is suppose to fix the issue without a workaround, which is to be released with storybook v6.5.0.