Storybook で Module not found: Error: Can't resolve に遭遇した時の対処法

はじめに

StorybookとTypeScriptを組み合わせて開発をしている際に、「Module not found: Error: Can't resolve」のエラーに遭遇することがあります。このエラーは、StorybookのWebpackがTypeScriptのモジュールを適切に解決できない場合に発生します。今回はこの問題の対処法を紹介します。

対処法

結論としては、Storybookの公式ドキュメントにあるTypeScript modules are not resolved within Storybookのセクションを参照してください。

実際の対処の流れ

以下の手順で、エラーを解決できます。

1. tsconfig-paths-webpack-pluginのインストール

まずは、tsconfig-paths-webpack-pluginを開発依存関係として追加します。このプラグインは、Webpackがtsconfig.jsonのパスエイリアスを理解できるようにします。

yarn add --dev tsconfig-paths-webpack-plugin

2. main.tsの設定変更

次に、Storybookの設定ファイルであるmain.tsに、Webpackの設定をカスタマイズするコードを追加します。

import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  webpackFinal: async (config) => {
    if (config.resolve) {
      config.resolve.plugins = [
        ...(config.resolve.plugins || []),
        new TsconfigPathsPlugin({
          extensions: config.resolve.extensions,
        }),
      ];
    }
    return config;
  },
  // 他設定

この変更により、StorybookがWebpackを使用してモジュールを解決する際に、TypeScriptのパスエイリアスが正しく適用されるようになります。

以上で、「Module not found: Error: Can't resolve」のエラーを解決することができます。この方法を試しても問題が解決しない場合は、Storybookの設定やTypeScriptの設定を再確認してみてください。