Next.jsの新しいバンドラーであるTurbopackを使用していて、fs is not definedというエラーで困りました。この記事では、この問題の原因と効果的な解決策について解説します。
はじめに
Turbopackは、Next.jsの新しい高速バンドラーとして注目を集めています。しかし、Node.jsのコアモジュールであるfs（ファイルシステム）を使用するライブラリで問題が発生することがあります。私は、機械学習ライブラリの@xenova/transformers を使おうとしてクライアント側でファイルが読めず困りました。
エラーの具体例
以下のようなエラーメッセージになります。
ReferenceError: fs is not defined
at [project]/node_modules/@xenova/transformers/src/env.js [app-client] (ecmascript)
このエラーは、クライアントサイド（ブラウザ）でNode.jsのfsモジュールを使おうとしたときに発生しました。
なぜこの問題が起きるのか？
1. WebpackとTurbopackの違い
従来のWebpackでは、Node.jsのコアモジュールに対して自動的にポリフィル（代替実装）を提供してくれていました。しかし、Turbopackではこの機能が提供されていません。
2. ブラウザの制限
ブラウザ環境では、セキュリティ上の理由からファイルシステムに直接アクセスすることができません。そのため、fsモジュールをそのまま使用することはできないのです。
3. クライアント/サーバーコードの区別
Turbopackは、クライアントサイドとサーバーサイドのコードを厳密に区別します。fsモジュールはサーバーサイドでのみ使用可能なため、クライアントサイドでの使用は制限されます。
解決方法
では、この問題をどのように解決すればよいのでしょうか？以下に、実践的な解決策を示します。
1. 開発環境でWebpackを使用する
最も簡単な解決策は、開発中は一時的にWebpackを使用することです。
# package.jsonの修正
"scripts": {
"dev": "next dev" # --turbopackオプションを削除
}
2. APIルートを活用する
ファイル操作が必要な処理は、APIルートを通じてサーバーサイドで実行するようにします。
// pages/api/process-file.ts
export async function POST(req: Request) {
const { text } = await req.json();
// ファイル操作をサーバーサイドで実行
return Response.json({ result });
}
3. ブラウザ互換の代替手段を使用する
ブラウザで利用可能な代替手段として、以下のようなAPIが使用する方法もみつけました：
キャッシュAPIの利用
// モデルデータのキャッシュ
const cache = await caches.open('ml-models');
const response = await cache.match('model-key');
IndexedDBの活用
const db = await openDB('models', 1, {
upgrade(db) {
db.createObjectStore('models');
},
});
エラー発生時のチェックポイント
問題解決の手順として、以下の点を確認してみましょう：
- コードがクライアントサイドで実行されているか
- 使用しているライブラリがファイルシステムに依存していないか
- ブラウザ互換の代替手段が利用可能か
- サーバーサイドでの処理に移行可能か
まとめ
Turbopackのfs is not definedエラーは、適切な対処方法を選択することで解決できます：
- 開発中はWebpackを使用する
- サーバーサイドAPIを活用する
- ブラウザ互換のストレージ手段を使用する
これらの解決策を状況に応じて使い分けることで、開発を円滑に進めることができます。
参考情報
おまけ：今後の展望
Turbopackは開発が活発に続いており、将来的にはこの問題も改善される可能性があります。定期的に公式ドキュメントをチェックして、最新の推奨事項を確認することをお勧めします。