【TypeScript5.0】パッケージのimportでts(7016)

最新のViteを使ったところ、TypeScriptが5.x系に上がったらしく、パッケージのimportができなくなりました。

import {} from "package-name"

で、下記のエラーが出ます。

Could not find a declaration file for module 'package-name'. '/home/username/coder-ka/project/node_modules/package-name/dist/index.esm.js' implicitly has an 'any' type.
  There are types at '/home/username/coder-ka/project/node_modules/package-name/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'package-name' library may need to update its package.json or typings.ts(7016)

まずは結論から、tsconfig.json の compilerOptions に以下を設定すれば直ります。

tsconfig.json

{
  "compilerOptions": {
+    "resolvePackageJsonExports": false,
  },
  ...
}

ちなみにこの後504 (Outdated Optimize Dep)が出たら、node_modulesフォルダを消して再インストールしてください。

rm -r node_modules

npm i

なぜ？

原因はTypeScript5.0で追加された--moduleResolution bundlerがViteの標準になったことで、moduleResolution が node16 / nodenext / bundler の時に、resolvePackageJsonExports が trueになることでエラーになります。

resolvePackageJsonExportsはパッケージ側のpackage.jsonで指定するexportsというプロパティがあるのですが、そちらをTypeScriptに意識させるプロパティだそうで、その結果として最初のエラーメッセージに繋がるようです。

パッケージ側の修正

一方のパッケージ側がどのような修正を行えばいいかと言うと、以下のようにpackage.jsonを修正します。

• exports フィールドに types を追加する

package.json

{
  ...
  "exports": {
    ".": {
+      "types": "./types/main.d.ts",
      "import": "./dist/my-lib.es.js",
      "require": "./dist/my-lib.umd.js"
    }
  },
  "types": "./types/main.d.ts",
  ...
}

各 exports 毎に型定義ファイルを指定できるようになったと思えばいいのかもしれません。