学ぶ、考える、書き出す。

学習し、自分なりに噛み砕いて、書き出すブログ。

eslint-plugin-importによってVitestの設定ファイル上でエラーが発生する場合がある

vitesteslint-plugin-import に依存している環境では、vitest.config.ts内で vitest/config をインポートすると Unable to resolve path to module 'vitest/config'. eslint(import/no-unresolved) というエラーが出る場合があります。

これはnode_modules/vitest以下にconfig.d.tsだけがある状態で、config.jsの実体はdist/config.jsにあることが元で発生するようです。ディレクトリ構造を示すと次のようになります。

/node_modules/vitest
|-- dist
|   |-- config.cjs
|   |-- config.d.ts
|   |-- config.js
`-- config.d.ts

vitest/config.d.tsの内容はvitest/dist/config.jsでexportしているものをそのままexportしています。

export * from './dist/config.js'

解決方法

ESLintの設定ファイルで import/resolver 内の node.extensions の値に d.ts を追加すると d.ts 内のモジュール読み込みが解決できるようになり、ESLintの import/no-unresolved のエラーが無くなります。

settings: {
  'import/resolver': {
    node: {
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.d.ts'],
    },
  },
}

記事を共有する

関連記事

  1. PreactとTypeScriptを使った環境でStorybookを使う方法

    Preact と TypeScript を使った環境で Storybook を使おうとしたら以下のエラーが出ました。

  2. TypeScriptでsetInterval()の型が合わない理由と解決方法

    @types/node に依存した状態で以下のようなコードを書いたときに Type 'Timer' is not assignable to type 'number'. というエラーメッセージが出ます。

  3. ブログ記事を投稿するためのフォームを作った

    はてなブログのMarkdownによる記事編集画面やesa - 自律的なチームのための情報共有サービスのように、本文の編集画面とリアルタイムプレビューが横並びになるような投稿フォームが個人的に好みです。

  4. Next.js + Vercel + microCMSなどを使ってほぼ無料でブログを運用する

    当ブログのシステム構成について紹介します。構成を真似することでほぼ無料(後述)でブログを運営できます。