🗂

Storybook 導入時の webpack tap エラー対処法（Next.js 15環境）

に公開
Next.js
Storybook
error
frontend
tech

Storybook導入時のwebpackエラー対処法

概要

Storybookを導入しようとしたところ、インストール後にエラーが発生しました。2時間ほど格闘したので備忘録として残します。
今回の問題は一時的なもので、今後のバージョンアップで解消される可能性が高いです。

動作環境

  • Next.js: 15.4.7
  • Tailwind CSS: 4.1.12
  • Storybook: 9.1.2
  • Node.js: 20.19.4
  • bun: 1.2.8

事象

以下のコマンドを実行し、storybookを起動しようとすると：

bunx create-storybook@latest

このようなエラーが発生：

ERROR in main
Module not found: TypeError: Cannot read properties of undefined (reading 'tap')

原因

webpackのバージョン競合

  • Next.js 15: webpack 5.98.0 を使用
  • Storybook: webpack 5.101.3+ を要求
  • この2つのバージョンで .tap() メソッドの実装が異なる

解決方法

1. webpack 5.101.2を明示的にインストール

bun add -D webpack@5.101.2

2. Storybookを再起動

bun run storybook

無事にStorybookが開けました！

補足

この問題は Next.js 15 と Storybook の一時的な互換性問題です。将来のバージョンアップで解消されると思います。

参考

https://github.com/webpack/webpack/issues/19821#issuecomment-3205259130

Discussion