Chakra UI unwillingly being added to storybook?
See original GitHub issueBug report
Describe the bug
Chakra UI is being added to storybook automatically and is generating errors on the console
Also an error on the left bar:
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:
- Created 3 years ago
- Comments:7 (2 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@storybook/react v6.1.15
@chakra-ui/react v1.1.6
@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