server-onlyをimportしたファイルを読み込みとテストが通らない問題の対処法

テストでThis module cannot be imported from a Client Component module.と言われる時の対処法

2023-06-21

RSC(React Server Components)を用いる際などに、クライアントから読み込まれると困るファイルに対して server-onlyというモジュールをimportすることで、クライアントからの参照時にエラーを発生させるという手法がある。

Next.jsのドキュメントにも記載がある

Next.js by Vercel - The React Framework | Next.js by Vercel - The React Framework

Next.js by Vercel is the full-stack React framework for the web.

https://nextjs.org/docs/getting-started/react-essentials#the-server-only-package

これを読み込んでいるモジュールをimportしたテストを書いたとき、 This module cannot be imported from a Client Component module.と言われてしまった。

vitestを使用していたので vite.config.jsに以下の設定をすることで解決した。

export default defineConfig({
  test: {
    // 設定いろいろ
   alias: {
     'server-only': resolve(__dirname, 'node_modules/server-only/empty.js')
   }
  }
})

server-only は通常、エラーをthrowする処理が書かれた index.jsを読み込ませてエラーを起こし、サーバーコンテキストからインポートしたときだけ empty.jsを読み込ませることでエラーを発生させないようにしている。( empty.jsは名前の通り何も書かれていないJavaScriptファイル)

そういう仕組みなので、aliasを設定してempty.jsがインポートされるようにすれば解決する。