こんにちは、フロントエンドエンジニアの峯です。
最近ようやくNextJSを触り始めました。
Gatsbyも少し触りましたが、NextJSは高機能って感じで結構大変です。
環境周りの構築で今回、ESLint導入でハマったので、そちらの紹介です。
目次
ESLint導入しているが、実行するとエラーになる
何も考えずにNextJS環境を構築してESLintを導入しました。 導入方法については公式のドキュメントをご確認ください。
yarn lint
yarn run v1.22.10
$ next lint
...
error - ESLint must be installed: yarn add --dev eslint
...
コマンドを実行すると上記のメッセージが表示されました。
ESLintのインストールを要求されているのですが、package.jsonを確認するとしっかりv8.1.0が導入されていました。
"devDependencies": {
...
"eslint": "8.1.0",
...
}
ESLintのバージョンをダウングレードして解決
調べてみると、どうやらESLintの8系バージョンが原因だったようで、7.32.0にダウングレードを行いコマンドを再実行することで解決しました。
yarn remove eslint
yarn add -D eslint@7.32.0
"devDependencies": {
...
"eslint": "7.32.0",
...
}
yarn lint
yarn run v1.22.10
$ next lint
info - Loaded env from /xxx/.env.production
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
✔ No ESLint warnings or errors