🚀

【Next.js】Parsing error: Cannot find module 'next/babel'の解決

に公開5件
Next.js
ESLint
tech

概要

以下の記事でNext.jsにESlint（JSのコードが正しいか検証してくれるツール）を導入した時に

Parsing error: Cannot find module 'next/babel'

が出たので解決方法を残しておきます。

https://fwywd.com/tech/next-eslint-prettier

上記エラー出力が確認できたのは以下のファイル（Tailwind CSSを導入済み）

  • next.config.js
  • tailwind.config.js
  • postcss.config.js

（他にもあるかもです）

上の画像のようにmoduleに波線が出て、ホバーすると表示されます。

解決方法

stackoverflowにしっかりがスレッドがありました。

https://stackoverflow.com/questions/68163385/parsing-error-cannot-find-module-next-babel

作業としては.eslintrcに以下のように追記するだけです。

.eslintrc
// extendsに'next/babel'を追記する
{
  "extends": ["next", "next/core-web-vitals", "prettier", "next/babel"]
}

これでOKです。波線が消えます。

Discussion

JeqJeq

投稿ありがとうございます。
VercelでDeployしようとするとFailed to load config "next/babel" to extend from.というエラーが出てくるのですが、この点はどのように解決されていますでしょうか？
参考：https://stackoverflow.com/questions/71662525/failed-to-load-config-next-babel-to-extend-from-eslintrc-json

MSKMSK

私もDocker+Next.jsの開発環境でeslint-config-prettier のプラグインをインストールすると
Parsing error: Cannot find module 'next/babel'のエラーが出るのに遭遇しました。
.eslintrcのextendsに"next/babel"を追加して波線はきえるが、Vercelでデプロイしてみると
デプロイは何事もなく完了するが、Buillding Logに
× ESLint: Failed to load config "next/babel" to extend from. Referenced from: /vercel/path0/next-app/.eslintrc.jsonというログは吐くがデプロイ自体は成功する。

MSKMSK

Docker等を使わずに普通のプロジェクトを作り、.eslintrcを以下にした場合Vercelでデプロイしてみましたが'next/babel'関連のエラーは発生せずにデプロイ出来ました。

検証環境

  • node 18.18.2
  • npm 10.1.0
  • next 14.0.4
  • typescript 5.3.3
.eslintrc

{
  "extends": [
    "next/core-web-vitals",
    "plugin:tailwindcss/recommended",
    "prettier"
  ]
}

まあエラー関係の質問はstackoverflowなどのサイトで自分の開発環境を記載した上で聞くとよいです。