TsconfigPathsPlugin type not compatible with webpack 5

Question

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.

Duck

The most recent version seems to work fine. The type error suggests you may have a string '...' somewhere in your configuration. – Azimuth

Hmm, I have the most recent version of both. "..." is a valid option (type) to pass into plugins now in webpack 5, that is you could say plugins: [ "...", new CssMinimizer(), ] and this will include terser plugin whereas it used to overwrite it and you had to manually add it back in before'. So that error is saying TsconfigPathsPlugin is not assignable to "...", not that I'm trying to use "..." anywhere. – Duck

Ah, didn't know that. In that case I don't have any suggestions, other than wiping node_modules, and maybe try creating a fresh package-lock.json. – Azimuth

@Azimuth tried that too unfortunately. I've downgraded webpack in the meantime, I'm sure I'll come back in a few minor versions and something will get it going :shrug: Thanks anyway – Duck

Did you find a solution? Having the same problems with BundleAnalyzerPlugin – Phalan

@breezertwo, I did not unfortunately, I ended up downgrading to webpack 4 – Duck

@BrettEast If you give it an other try in the future, try to wrap the plugin. (new TsconfigPathsPlugin({ // type error here configFile: './tsconfig.server.json', }) as unknown) as ResolvePluginInstance. This did the trick for me. It's due to some unfinished types of the plugins – Phalan

I think I had the same problem and I ended up casting the resulting plugin instance into correct type and it seemed to work fine... – Glynn

Answer 1

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",

Gaeta

Answer 2

I also faced the same issue but use the below version:

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

Bamby

Answer 3

if this doesn't work try this combination

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

Mannikin