Next.jsで『SyntaxError: Unexpected identifier ‘__webpack_async_dependencies__’』というエラーが出た時の対処法

Next.js 14 を使って、Server Actionsを実装し、呼び出したところ、以下のエラーに遭遇して頭を抱えていました。

 ⨯ SyntaxError: Unexpected identifier '__webpack_async_dependencies__'

この記事を見ている方は同じエラーが出ていると思います。

私のケースでは、結論から言うと firebase admin sdk が悪さをしていました。

そのため、firebaseなんて全く使っていないと言う方には関係ない情報なので、そっ閉じしてください。

firebaseを使っている方には、本記事の内容で対処できると思います。

なお使用しているsdkのバージョンは、 “firebase-admin”: “^11.11.1” です。

具体的に解決した方法は、Next.js 14 + firebase-adminでserver actionsを実行すると、webpack errorになる の記事の通りです。

簡単にまとめると、

firebase admin sdk を使用している Server Actions を、client component で直接 import すると上記エラーが出る。

そのため、server component で Server Actions を import して、client component に props として Server Actions を渡すことで解決する。

というような対処が求められます。

正直言ってこの方法を採用すると、実装は面倒だし、ソースコードが読みづらくなるし、いいことがありません。

firebase admin sdk と Server Actions の組み合わせはあまり相性が良くないのかもしれません。。

僕は次のアプリでFirebaseを使わないようにしようと思ってます。Clerkなどの別の認証ツールを使うと良いかも。（Clerkは料金が高いので、判断が難しいですが。）

とりあえず、上記記事を書いてくれた Sg さんには感謝。