Chakra UI が Storybook で動かなかったときの対処



Next.js, Chakra UI を使って個人ブログを作っている中で、Storybook を導入した際に遭遇したエラーの原因と対処を調べたので備忘録として記事にしたもの。


  1. 公式の Storybook Addon を使って、Storybook のための Chakra UI の設定をした。
  2. yarn storybook で Storybook を起動し直すと大量のエラーで失敗。
    Storybook 上には画像のようにエラーが表示されている。
    Image from Gyazo


Chakra の中の framer-motion が使っている *.mjs ファイルを Storybook が解決できないことによるエラーだったらしく、上記 issue にあるように Storybook の  Webpack の設定をいじってあげると解消できた。

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.

    // 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).
      test: /\.mjs$/,
      include: /node_modules/,
      type: 'javascript/auto',
    // Return the altered config
    return config;