[備忘録] Nextjsプロジェクトにstorybookを導入する場合に発生するModule not found対応

これはなに

Nextjs プロジェクトに storybookを導入したときに以下のエラーが発生したので解決する方法を記録したもの

Module not found: Error: Can't resolve '@/stories/Button' in './src/stories'

なぜ起きたか

Nextjs プロジェクトを作成した際に tsconfig.json に以下のエイリアスが作成される

tsconfig.json

{
    "paths": {
        "@/*": ["./src/*"]
    }
}

作成されたエイリアスを使ってモジュールを参照するようにしていたところ、 typeScript の中ではエイリアスの認識が出来るものの storybook(内部的には webpack )側がそれを認識できないらしい

解決にあたって満たしたいこと

• モジュール参照エラーが解消してほしい
  • 当然
• エイリアスによるモジュール参照は引き続き行いたい
  • 相対パスで参照すれば解決するがそれはしたくない
• パスエイリアスの定義は tsconfig.json にのみ記述した状態を維持したい
  • 他の設定ファイルに同じエイリアス定義を書きたくない( DRY にしたい)

ネットで検索して解決自体はできたが、求める解答を得るのに非常に時間がかかってしまったため簡潔に備忘録を残すことにした

環境

• next: 14.0.3
• storybook: 7.6.3

再現手順

Nextjs プロジェクトを作成する

npx create-next-app@latest

✔ What is your project named? … .
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes

storybook を導入する

npx storybook@latest init

storybook をビルドして現時点では正常動作することを確認する

# npm
npm run build-storybook
# yarn
yarn build-storybook

当然ビルドは通る

エイリアスを使ってモジュール参照するように変更する

storybook の import 文を書き換える

src/stories/Button.stories.ts

- import { Button } from './Button';
+ import { Button } from '@/stories/Button';

storybook をビルドする

# npm
npm run build-storybook
# yarn
yarn build-storybook

Module not found エラーが発生する

Module not found: Error: Can't resolve '@/stories/Button' in './src/stories'

解決方法

tsconfig-paths-webpack-plugin を使用して tsconfig.json のパスエイリアスを参照できるようにして storybook の設定に組み込むと解決する

プラグインのインストール

# npm
npm install --save-dev tsconfig-paths-webpack-plugin
# yarn
yarn add -D tsconfig-paths-webpack-plugin

storybook の設定

設定を編集する

.storybook/main.js

import type { StorybookConfig } from "@storybook/nextjs";
// プラグインのインポート
import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  // ここから追加
  webpackFinal(baseConfig) {
    baseConfig.resolve!.alias = {
      ...baseConfig.resolve!.alias,
    };
    baseConfig.resolve!.plugins = [
      ...(baseConfig.resolve!.plugins || []),
      new TsconfigPathsPlugin(),
    ];
    return baseConfig;
  },
  // ここまで
};
export default config;

まとめ

プラグインを導入して tsconfig.json のエイリアス設定をそのまま storybook(webpack)に認識させて解決した

参考