【Next.js 13】Yarn PnPとApp Dirを有効にするとビルドが失敗する問題とその対処法

はじめに

これは執筆時点でのNext.js v13.0.1で生じる問題です。今後のアップデートで修正される可能性があります。

状況

Yarn PnPを使用してパッケージを管理していて、なおかつappDirをtrueにするとビルド時にエラーとなりビルドに失敗してしまいます。

$ yarn build
warn  - You have enabled experimental feature (appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback

warn  - `enableUndici` option is unnecessary in Node.js v18.0.0 or greater.

> Build error occurred
Error: EROFS: read-only filesystem, open '/node_modules/next/dist/server/initialize-require-hook.js'
    at makeError$1 (/Users/shun_shobon/tmp/my-app/.pnp.cjs:958:24)
    at EROFS (/Users/shun_shobon/tmp/my-app/.pnp.cjs:985:10)
    at ZipFS.prepareWriteFile (/Users/shun_shobon/tmp/my-app/.pnp.cjs:2820:13)
    at ZipFS.writeFilePromise (/Users/shun_shobon/tmp/my-app/.pnp.cjs:2791:55)
    at /Users/shun_shobon/tmp/my-app/.pnp.cjs:3912:26
    at /Users/shun_shobon/tmp/my-app/.pnp.cjs:4136:81
    at ZipOpenFS.getZipPromise (/Users/shun_shobon/tmp/my-app/.pnp.cjs:4243:22)
    at ZipOpenFS.makeCallPromise (/Users/shun_shobon/tmp/my-app/.pnp.cjs:4136:23)
    at ZipOpenFS.writeFilePromise (/Users/shun_shobon/tmp/my-app/.pnp.cjs:3909:23)
    at VirtualFS.writeFilePromise (/Users/shun_shobon/tmp/my-app/.pnp.cjs:3219:24) {
  code: 'EROFS'
}

このエラーはnext devを実行した場合には起こらないため、気づきにくいです。
どうやらビルド中にライブラリのコードを書き換えようとするために生じるエラーのようです。この問題に関してはIssueを通して報告済みですが、執筆現在は特に返信はありません。

対処法

yarn unplugコマンドを使用してnextをunplugします。

yarn unplug next

コマンド実行後はnext buildでのビルドに成功するはずです。