Chakra UI + Storybook
これは何？
Next.js, Chakra UI を使って個人ブログを作っている中で、Storybook を導入した際に遭遇したエラーの原因と対処を調べたので備忘録として記事にしたもの。
経緯
- 公式の Storybook Addon を使って、Storybook のための Chakra UI の設定をした。
-
yarn storybookで Storybook を起動し直すと大量のエラーで失敗。
Storybook 上には画像のようにエラーが表示されている。
原因と対処
.storybook/main.js
module.exports = {
stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
framework: '@storybook/react',
// unpins Storybook's dependence on Emotion 10 so that build can compile successfully
features: { emotionAlias: false },
webpackFinal: async (config, { configType }) => {
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
// You can change the configuration based on that.
// 'PRODUCTION' is used when building the static version of storybook.
// https://github.com/polkadot-js/extension/issues/621#issuecomment-759341776
// framer-motion uses the .mjs notation and we need to include it so that webpack will
// transpile it for us correctly (enables using a CJS module inside an ESM).
config.module.rules.push({
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto',
});
// Return the altered config
return config;
},
};
Author And Source
この問題について(Chakra UI + Storybook), 我々は、より多くの情報をここで見つけました https://zenn.dev/kozukata1993/articles/4030d7e7dd6c28dd6cb1著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol