🗂

Storybookで何故かModule not foundエラーが出る

2023/11/12に公開

先日Next.jsプロジェクトにStorybookを導入したところ、一部のコンポーネントを表示したい際にModule not foundエラーが出てしまいました。
とはいえアプリケーションでは普通に表示されているし、VSCodeにもエラーはありませんでした。調べてみると、どうやらStorybookではNext.jsのimport aliasの設定が引き継がれていないようでした。
というわけで、import aliasを設定しているNext.jsプロジェクトにStorybookを導入する場合の手順について紹介します。
ちなみにこの手順は公式ドキュメントそのままです

Storybookをimport aliasに対応させる

次のコードを.storybook/main.tsに追加するだけです。

import path from 'path';
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  webpackFinal: async (config) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@': path.resolve(__dirname, '../src'),
      };
    }
    return config;
  },
};

export default config;

Storybookをimport aliasに対応させる

Discussion