webpack5 で tsconfig-paths-webpack-plugin の new TsconfigPathsPlugin を宣言するとエラーになるやつの応急処置

tsconfigのpathsを有効にするため tsconfig-paths-webpack-plugin を入れたら型エラーになりました。

症状

webpack.config.ts

import { TsconfigPathsPlugin } from 'tsconfig-paths-webpack-plugin';

...省略

  resolve: {
    plugins: [
      new TsconfigPathsPlugin({
        configFile: "./tsconfig.json",
      }),
    ],
  },

とリポジトリ記載にしたがってやっても、

Type 'TsconfigPathsPlugin' is not assignable to type '"..." | ResolvePluginInstance'.

というエラーが出てしまいます。

"webpack": "^5.74.0",
"tsconfig-paths": "^4.1.0",
"tsconfig-paths-webpack-plugin": "^3.5.1",

を使用。

gitissueやstackoverflowなどでも同様のエラーが出たという質問などがあり、人によってはtsconfig-paths-webpack-pluginのバージョンを変えたら上手くいったという人もいますが自分の場合は変えても上手くいかず。

webpack4に変えればいけたという人もいますがそこまではしたくなく。

解決

ということで

webpack.config.ts

  resolve: {
    plugins: [
      new TsconfigPathsPlugin({
        configFile: "./tsconfig.json",
      }) as any,
    ],
  },

みんなの大嫌いなanyを使用して逃げの解決しました。もっと良い解決法があったらコメ欄で教えてもらえると嬉しいです。