はるさめ.dev

electron-vite と tailwindcss/vite で ts(2307) エラー

に公開

背景

electron-vite を使ってプロジェクトをスキャフォールドしました。
その後、tailwind を導入するために Using Vite | Tailwind CSSを元にセットアップしましたが、vite.config.ts で @tailwindcss/vite のインポートの行で以下の ts エラーが発生しました。

モジュール '@tailwindcss/vite' またはそれに対応する型宣言が見つかりません。
'/Users/haru/ghq/github.com/harusame0616/pc-app-template-electron-vite-react/node_modules/@tailwindcss/vite/dist/index.d.mts' に型がありますが、現在の 'moduleResolution' 設定ではこの結果を解決できませんでした。'node16'、'nodenext'、または 'bundler' への更新を検討してください。ts(2307)

解決方法

tsconfig.node.json の compilerOptions に"moduleResolution": "bundler"を追加するだけ

{
  "extends": "@electron-toolkit/tsconfig/tsconfig.node.json",
  "include": ["electron.vite.config.*", "src/main/**/*", "src/preload/**/*"],
  "compilerOptions": {
    "composite": true,
    "types": ["electron-vite/node"],
    "moduleResolution": "bundler"
  }
}

補足

Module Resolution | TypeScript TSConfig Reference によるとモジュール解決戦略を指定する設定。
bundler を指定すると package.json の imports/exports をサポートしてくれる。
@tailwindcss/vite の package.jsonを見てみると exports にtypes が指定してあり、これを参照する必要があるため moduleResolution の設定が必要となる。

package.json
  "exports": {
    ".": {
      "types": "./dist/index.d.mts",
      "import": "./dist/index.mjs"
    }
  },

参考

コメント