【Next.js】Failed to load SWC binary for linux/arm64の解消法【Docker】

エラーが発生した状況

DockerでNext.jsの環境を構築し、開発を行なっていました。
ホスト側でyarn addをした後にdocker compose upしたところFailed to load SWC binary for linux/arm64となりました。

ターミナル

$ yarn add @mui/material @mui/styled-engine-sc styled-components

$ docker compose up
[+] Running 1/0
 ⠿ Container next-front-1  Crea...                          0.0s
Attaching to next-front-1
next-front-1  | yarn run v1.22.18
next-front-1  | $ next dev
next-front-1  | ready - started server on 0.0.0.0:3000, url: http://localhost:3000
next-front-1  | error - Failed to load SWC binary for linux/arm64, see more info here: https://nextjs.org/docs/messages/failed-loading-swc
next-front-1  | info  - Attempted to load @next/swc-linux-arm64-gnu, but it was not installed
next-front-1  | info  - Attempted to load @next/swc-linux-arm64-musl, but it was not installed
next-front-1  | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
next-front-1  | error Command failed with exit code 1.
next-front-1 exited with code 1

原因

ホスト側でyarn addなどをしてしまうとswc-linux-arm64~がなくなり、Failed to load SWC binary for linux/arm64となります。

確認したところ、ホスト側でyarn addをしたことでnode_modules/.yarn-integrity内の"systemParams"が"linux-arm64-93"からdarwin-arm64-93に変更されていました。
下の画像左がホスト側でyarn addした後の.yarn-integrityで右がする前の.yarn-integrityです。

またnode_modules内の@nextを確認すると上記と同様にswc-linux-arm64~がswc-darwin-arm64に置き換わっていました。

ホスト側でyarn addする前（変更前）

ホスト側でyarn addした後（変更後）

なおpackage.json及びyarn.lockにはyarn addで追加されたもの以外の変更箇所はないようでした。

ホスト側及びコンテナ側のOS名とアーキテクチャを確認すると以下のとおりでした（M1 macを使用しています）。

ターミナル

$ uname -s -m
Darwin arm64

$ docker compose run サービス名 uname -s -m
Linux aarch64

OSが異なっていることがわかります。

arm64及びaarch64については以下のページをご参照ください。

ホスト側でyarn addしたことでホスト側のOSなどに基づいてswc-darwin-arm64がインストールされ、swc-linux-arm64~がswc-darwin-arm64に置き換わります。
この変更がdocker compose upした際にコンテナ内に反映されます。
するとコンテナ内の環境で必要なswc-linux-arm64~が存在しないため、Failed to load SWC binary for linux/arm64となります。

解決方法

ホスト側でyarn addする前の状態に再度変更するか、上記の変更がコンテナ内に加わらないようにする必要があります。

コンテナ側でyarn install

コンテナ内でyarn installすることでホスト側でyarn addする前の状態に戻ります。
具体的には以下の通りです。

ターミナル

$ docker compose run サービス名 yarn install
yarn install v1.22.18
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
Done in 121.88s.

$ docker compose up
[+] Running 1/0
 ⠿ Container next-front-1  Crea...                          0.0s
Attaching to next-front-1
next-front-1  | yarn run v1.22.18
next-front-1  | $ next dev
next-front-1  | ready - started server on 0.0.0.0:3000, url: http://localhost:3000
next-front-1  | wait  - compiling...
next-front-1  | event - compiled client and server successfully in 2.1s (124 modules)

docker compose run サービス名 yarn installでコンテナ側で node_modulesが作成され、その変更がホスト側にも反映されます。
よってその後にdocker compose upすると問題なく起動します。

volumeを利用する

node_modulesに対してボリュームを設定し、ホスト側のnode_modulesに対する変更がコンテナ内に反映されないようにします。
docker-compose.ymlのvolumesを以下のように記述します。

docker-compose.yml

version: '3.9'
services:
  front:
    build: .
    volumes:
      - .:/myapp
      - node_modules:/myapp/node_modules
    environment:
      NODE_ENV: development
    ports:
      - 3000:3000
volumes:
  node_modules:

上記では名前付きボリュームを利用していますが、匿名ボリュームでも可です。
匿名ボリュームの場合には以下のようになります。

docker-compose.yml

version: '3.9'
services:
  front:
    build: .
    volumes:
      - .:/myapp
      - /myapp/node_modules
    environment:
      NODE_ENV: development
    ports:
      - 3000:3000

より詳細な説明を以下に記述しました。

ホスト側でyarn install不可にする

ホスト側でyarn installやyarn addを実行することでエラーが発生するため、これらを実行できなくすることで予防することができます。
実行不可にする方法については以下のページに記載しています。

npmの場合

npmを使用した場合についても確認しました。
create-next-app実行時に--use-npmオプションを付けることでnpmを使用することができます。

結果、npmの場合にはホスト側でnpm installを実行してもnode_modules内@nextのswc-linux-arm64~がswc-darwin-arm64に変更されることはなく、swc-linux-arm64~とswc-darwin-arm64の両方が存在するようになりました。

ホスト側でnpm installする前

ホスト側でnpm installした後

そのため、ホスト側でnpm installをしてもFailed to load SWC binary for linux/arm64は発生しません。

ただし、node_modulesが存在しない状態でホスト側でnpm installを実行するとswc-darwin-arm64だけがインストールされ、docker compose upするとFailed to load SWC binary for linux/arm64が発生します。

node_modulesが存在しない状態でホスト側でnpm installした後

ホスト側でnpm ciした場合もnode_modulesが再生成されるため上記と同様になります。

「ホスト側でnpm installする前」の状態に戻すためには、コンテナ側でnpm ciを実行します。
具体的には以下のコマンドを実行します。

ターミナル

$ docker compose run <サービス名> npm ci

npm installでは、swc-linux-arm64~は追加されエラーは解消されるものの、node_modulesが再生成されるわけではないため、swc-darwin-arm64は存在せずswc-linux-arm64~のみ存在する状態にならないことがあります。

参考になるページ