【Next.js】Failed to load SWC binary, see more info here: https://nextjs.org/docs/messages/failed-loading-swc でハマった話【備忘録】

next.js | reactFrontend

Next チュートリアル中に localhost:3000 が起動しなくなった

Next.js の チュートリアルを進めていたときに、 npm run dev コマンドを実行するたびに、以下のエラーが発生するようになりハマった。

> @ dev /Users/kinoshitahirotaka/Documents/Work/study/react-next-tutorial/nextjs-blog
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 452 ms (158 modules)
wait  - compiling / (client and server)...
error - Failed to load SWC binary, see more info here: https://nextjs.org/docs/messages/failed-loading-swc
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: `next dev`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

原因

Next.js では、RustベースのコンパイラであるSWCを搭載している。その結果、従来のコンパイラよりも高速で処理が行われるようになっているようだ。

Next.js now uses Rust-based compiler SWC to compile JavaScript/TypeScript. This new compiler is up to 17x faster than Babel when compiling individual files and up to 5x faster Fast Refresh.

SWC requires a binary be downloaded that is compatible specific to your system. In some cases this binary may fail to load either from failing to download or an incompatibility with your architecture.

参考: https://nextjs.org/docs/messages/failed-loading-swc

しかし、SWCバイナリのダウンロードに失敗してしまっているため、コンパイルをすることができない状態になっているとのこと。

解決

以下の方法でlocalhost:3000を復帰させることができた。

Next.js の TOPディレクトリに対して、 .babelrc を作成する。
作成したbabelファイルに、以下の設定を追加する。

{
    "presets": ["next/babel"]
}

この設定を追加することで、SWCからbabelを使ったコンパイルに変化させることができたようだ。

ただ、SWCを使わない設定になってしまっているので、NextのRustコンパイラの良さがなくなってしまった部分でもありそうな気がする。

とりあえず、チュートリアル進めたいだけなので、これでいいや。

コメント

タイトルとURLをコピーしました