🔙

【解決済み】eslint-plugin-importがTypeScript環境で動かないことがある件について

2023/07/23に公開
2

追記(2024/1/29)

この記事で取り上げた問題ですが、v2.29.1で解消されていることを確認しました。コメントで指摘してくださりありがとうございました。

概要

TypeScriptのプロジェクトでESLintを使いつつ、import文の並び順チェックなどを可能にするESLintのプラグインであるeslint-plugin-importを使おうとしたとき、次のようなエラーが発生しました。

$ pnpm eslint ./src/main.ts

Oops! Something went wrong! :(

ESLint: 8.45.0

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received an instance of Array
Occurred while linting /path/to/project/src/main.ts:1
Rule: "import/namespace"
# 以下スタックトレース

原因

eslint-plugin-importtsconfig.jsonを読み込むために使用しているtsconfig-paths3.14.2と古く、最新のtsconfig.jsonを解釈できません。上記エラーは、extendsとして文字列ではなく文字列の配列を定義しているtsconfig.jsonを使用したために発生しました。

// tsconfig.json
{
  "extends": [
    "@tsconfig/strictest/tsconfig.json",
    "@tsconfig/node18/tsconfig.json"
  ]
}

対処方法

この問題はすでに報告されているため修正待ち……なのですが、そう簡単な話ではないようです。

https://github.com/import-js/eslint-plugin-import/issues/2751

https://github.com/import-js/eslint-plugin-import/pull/2447

私が上記Issue及びPRをざっくりと読んだところ、どうやらtsconfig-pathsのバージョンアップに伴うNode.js v4のサポート終了がeslint-plugin-importにとってうれしくないようで、バックポートうんぬん……という話になっているようでした。すでにEOLから長い時間が経過しているNode.js v4をサポートし続けるためにこの問題の修正が遅れているような状況だと思われます(が、悪い方向に加熱した議論をわざわざ追えるほどの元気が私にはないので申し訳ありませんが詳しい話はわかりません)。

簡単にできる対処方法として、tsconfig-pathsを使わないeslint-plugin-importフォークであるeslint-plugin-iを使うというものがあります。

https://github.com/un-es/eslint-plugin-i

このフォークは、単純にeslint-plugin-importを置き換えるだけで問題なく使えます。

$ pnpm add -D eslint-plugin-import@npm:eslint-plugin-i@latest

おわりに

慣れないESLintの設定で何かミスをしてしまったのかと誤解して、原因究明に無駄に時間がかかってしまいました。結局のところ明らかになった「原因」も嫌に面倒なものだったので楽しくありません。とりあえずこの問題についての日本語情報として、こうして記事に残しておくことにします。

Discussion