question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItΒ collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Chakra UI unwillingly being added to storybook?

See original GitHub issue

Bug report

Describe the bug

Chakra UI is being added to storybook automatically and is generating errors on the console

image

Also an error on the left bar:

image

To reproduce

Created a storybook for my app, here is the file structure:

β”œβ”€β”€ .babelrc
β”œβ”€β”€ .eslintrc.json
β”œβ”€β”€ .git
β”œβ”€β”€ .gitignore
β”œβ”€β”€ jest.config.js
β”œβ”€β”€ jest.tsconfig.json
β”œβ”€β”€ .next
β”œβ”€β”€ next.config.js
β”œβ”€β”€ next-env.d.ts
β”œβ”€β”€ node_modules
β”œβ”€β”€ package.json
β”œβ”€β”€ .prettierignore
β”œβ”€β”€ .prettierrc.js
β”œβ”€β”€ public
β”œβ”€β”€ README.md
β”œβ”€β”€ src
β”œβ”€β”€ .storybook
β”œβ”€β”€ tsconfig.json
└── yarn.lock

Minimal reproduction

Just created a standard storybook

#.storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.@(js|ts|jsx|tsx|mdx)'],
  addons: [
    '@storybook/addon-essentials',
    'storybook-addon-styled-component-theme/dist/register'
  ]
}

#.storybook/webpack.config.js

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('babel-loader'),
    options: {
      presets: [require.resolve('babel-preset-react-app')],
    },
  });

  config.resolve.extensions.push('.ts', '.tsx', 'js', 'jsx');

  config.resolve.plugins.push(
    new TsconfigPathsPlugin({
      extensions: ['.ts', '.tsx', '.js', '.jsx']
    })
  )
  
  return config;
};

Expected behavior

Chakra-ui to not load on Storybook or to load without any errors.

System information

  • OS: Linux
  • Browser (if applies): Chrome
  • Version of 1.0.0-rc.5
  • Version of Node.js: 14.12

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

26reactions
futhrcommented, Jan 26, 2021

@storybook/react v6.1.15 @chakra-ui/react v1.1.6

module.exports = {
  ...
  refs: {
    '@chakra-ui/react': {
      disable: true,
    },
  },
}
5reactions
jonparkdevcommented, Feb 10, 2022

@with-heart Out of curiosity, is it possible to somehow apply my custom Chakra-UI theme to the Chakra storybook the is being composed in my own storybook

Read more comments on GitHub >

github_iconTop Results From Across the Web

Chakra UI + Storybook
Use the official Storybook Addon for Chakra UI to configure Storybook to automatically wrap your stories with the <ChakraProvider /> and add a...
Read more >
Chakra UI Addon | Storybook: Frontend workshop for UI ...
Use Chakra UI in your Storybook stories. This Plugin wraps each of your stories with ChakraProvider which can be configured using Storybook parameters....
Read more >
Chakra UI is not loading when used with Storybook
I've set up Storybook and Chakra-UI using create-react-app following the decorator's documentation as mentioned here. Here's the link for theΒ ...
Read more >
11 Powerful Ways To Nurture Inclusion At The Workplace
But what does having an inclusive workplace culture truly mean? Is it the same as having a diverse workforce? Let's take a look....
Read more >
Everything I Know About Style Guides, Design Systems, and ...
A component library is living, breathing implementation of your style guide. It's a shared set of UI components that developers can consumeΒ ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found