Cannot find module '@typescript-eslint/eslint-plugin' によってbuildできない。

Question

前提・実現したいこと

Next.js11&ts環境にてBuildを試みていますが、eslint関連のエラーで落ちてしまいます。

発生している問題・エラーメッセージ

> Build error occurred
Error: Failed to load plugin '@typescript-eslint' declared in '.eslintrc': Cannot find module '@typescript-eslint/eslint-plugin'

該当のソースコード

// .eslintrc

{
	"env": {
		"browser": true,
		"es2021": true
	},
	"extends": ["next", "next/core-web-vitals"],
	"parser": "@typescript-eslint/parser",
	"parserOptions": {
		"ecmaFeatures": {
			"jsx": true
		},
		"ecmaVersion": 12,
		"sourceType": "module"
	},
	"plugins": ["react", "@typescript-eslint", "react-hooks"],
	"rules": {
		"react/display-name": "off"
	}
}

// package.json

{
	"name": "hoge",
	"version": "0.1.0",
	"private": true,
	"scripts": {
		"dev": "next dev",
		"build": "next build",
		"start": "next start",
		"lint": "next lint"
	},
	"dependencies": {
		"@typescript-eslint/parser": "^4.28.3",
		"moment": "^2.29.1",
		"next": "^11.0.1",
		"react": "^17.0.2",
		"react-dom": "^17.0.2",
		"react-moment": "^1.1.1"
		// 省略
	},
	"devDependencies": {
		"@types/react": "17.0.11",
		"@typescript-eslint/eslint-plugin": "^4.28.3",
		"autoprefixer": "^10.2.6",
		"eslint": "^7.30.0",
		"eslint-config-next": "11.0.1",
		"eslint-plugin-react": "^7.24.0",
		"postcss": "^8.3.5",
		"typescript": "4.3.4"
	}
}

試したこと

• eslintバージョン上げ
• eslint再インストール

npm i --save-dev typescript @typescript-eslint/parser

npm install --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier eslint-config-prettier eslint-plugin-prettier
npm notice save @typescript-eslint/parser is being moved from dependencies to devDependencies
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ eslint@7.30.0
+ eslint-config-prettier@8.3.0
+ eslint-plugin-prettier@3.4.0
+ @typescript-eslint/eslint-plugin@4.28.3
+ @typescript-eslint/parser@4.28.3
+ prettier@2.3.2
added 8 packages from 7 contributors, removed 2 packages, updated 5 packages, moved 1 package and audited 551 packages in 3.806s

77 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Comments

[hoshi-takanori]

@typescript-eslint/eslint-plugin はどうやってインストールしましたか？

[ruizu]

npmを使用しています
```
npm i --save-dev typescript @typescript-eslint/parser
```

Answer 1

npm install --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier eslint-config-prettier eslint-plugin-prettier

eslint系統をすべて入れなおすことで治りました。
具体的な原因は不明です。