[SOLVED] TsconfigPathsPlugin type not compatible with webpack 5

TsconfigPathsPlugin type not compatible with webpack 5

I'm trying to upgrade to webpack 5, but I'm now getting a type error when trying to use the TsconfigPathsPlugin. (npm tsconfig-paths-webpack-plugin).

I need this plugin so that I can resolve the alias paths in my files. You can see a usage example here: https://betterprogramming.pub/the-right-usage-of-aliases-in-webpack-typescript-4418327f47fa

resolve: {
    extensions: [...],

    // resolve aliases from tsconfig.server.json
    plugins: [
      new TsconfigPathsPlugin({ // type error here
        configFile: './tsconfig.server.json',
      }),
    ],

    alias: {...},
},

I get the following error:

Type 'TsconfigPathsPlugin' is not assignable to type '"..." | ResolvePluginInstance'.
Type 'TsconfigPathsPlugin' is not assignable to type 'ResolvePluginInstance'.
Types of property 'apply' are incompatible.

I have the feeling that this isn't a widespread issue as I can't see any mention of it in other places, but I would have thought that I'd be able to find at least someone that has come across the same problem.

Solution

I encountered the same problem, but today I found the plugin works under below versions.

"tsconfig-paths-webpack-plugin": "^3.5.1",
"webpack": "^5.51.1",