【Next.js】Parsing error: Cannot find module ‘next/babel’の解決方法

概要

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

Parsing error: Cannot find module ‘next/babel’

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

Next.js (TypeScript) に ESLint と Prettier を導入し、コードを綺麗に保とう

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

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

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

解決方法

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

Parsing error : Cannot find module ‘next/babel’

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

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

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

関連記事

あわせて読みたい

【必見】現役エンジニア“達”がオススメ！買って後悔しないUdemy講座まとめ この記事のまとめ 現役エンジニア達がオススメする動画教材サービスUdemyで購入できる講座をまとめました。 「プログラミング言語・フレームワーク」はもちろん「Git、L…