Parsing error: Cannot find module 'next/babel'のエラーの解決方法 メモ

エラーの内容

Next.jsを導入し、関数を定義したところ以下のようなエラーが出力された

const Example = () => {
//↑↑Parsing error: Cannot find module 'next/babel'
  return <h1>Example</h1>
}

export default Example;

エラーの原因

ESlintという、コードが正しいかどうか検証してくれる静的検証ツールを導入した結果、ルール適応外になってしまったようだ

ESlintについて詳しくはこちら

解決法

ESlintには設定ファイルがあり(.eslintrc.jsonという名前)、そこを編集することで解決できる

{
  "extends": "next/core-web-vitals"
}

この状態から

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

この設定にすることでエラーは出力されなくなった

extendsは共有設定の適応をしているよう

設定ファイルにはほかにもプロパティがある
そちらの意味についてはこちら