More than 1 year has passed since last update.

Next SWCエラーによる解決方法(本題はESLint)

Posted at 2022-05-25

初めに

今回はNext.jsがversion12になったことによって、SWCエラーの解消方法を備忘録として以下に記載したいと思います

本題はyarn eslint実行時にエラーになってしまうときの解消方法ですが、良く出るエラーについても記載しておきます

create-next-appでプロジェクトを作成後にyarn buildまたはnpm run buildを実行すると

error - Failed to load SWC binary

と出る方がいると思います。

解消方法は以下の通りです

まずswcMinify: falseをnext.config.jsに追記することでSWC挙動を停止させます。

// next.config.js

module.exports = {
  swcMinify: false // 追記
}

SWCを停止させるとコンパイルするものがなくなるので、代わりとなるもの（ここではbabel）を用意します
公式サイトでも.babelrcを使用した方法が記載ので詳細はそちらをご覧ください

// .babelrcファイルを作成し以下を追記
{
  "presets": ["next/babel"]
}

ここで本題ですが、babelに変更したことによって正しく設定をしないとエラーが発生してしまい、eslintに関しても同様です
ここに関しては、色んなサイトを参照したのですが、解決策を見つけることができませんでした
なので、色々試した結果以下の記載方法で解決できたので備忘録として残します

yarn eslintを実行したら以下エラーが出ました

Parsing error: Cannot find module 'next/babel'

まずは色んなサイトに記載されていた解決方法で試してみます

// .eslintrc
{
  "extends": ["next", "next/core-web-vitals", "prettier", "next/babel"]
}

またyarn eslintで実行。。。

Parsing error: Cannot find module 'next/babel'

同じエラーが出る。なぜ？

.eslintrcのnext/babelを消去する

// .eslintrc
{
  "extends": ["next", "next/core-web-vitals", "prettier"]
}

これでできました！
他のyarn devなどのコマンドでもエラーが出ていないことも確認できました

どれもnext/babelを追記したら問題ないとの記事が多く四苦八苦しました

StackOverflowの記事で同じような問題になった方がいたのでご参考までにURLを後で載せておきます

根本的な原因は不明ですが、同じような問題で解決策が見つからないという方は、こちらの記事を解決策の一つとして試してみては如何でしょうか？