Webpack 5 resolver and duplicate type errors?!

[rnnyrk]

After updating to the latest version I got several errors regarding tsconfig-paths-webpack-plugin. I have no clue how to solve these or what's causing it. Any suggestions? My webpack config is also below

Type 'TsconfigPathsPlugin' is not assignable to type '"..." | ResolvePluginInstance'.
  Type 'TsconfigPathsPlugin' is not assignable to type 'ResolvePluginInstance'.
    Types of property 'apply' are incompatible.
      Type '(resolver: import("/Users/Developer/React/node_modules/tsconfig-paths-webpack-plugin/lib/plugin.temp.types").Resolver) => void' is not assignable to type '(resolver: Resolver) => void'.
        Types of parameters 'resolver' and 'resolver' are incompatible.
          Type 'Resolver' is not assignable to type 'import("/Users/Developer/React/node_modules/tsconfig-paths-webpack-plugin/lib/plugin.temp.types").Resolver'.
            The types of 'options.plugins' are incompatible between these types.
              Type 'Plugin[]' is not assignable to type 'Plugin[]'. Two different types with this name exist, but they are unrelated.
                Type 'Plugin' is not assignable to type 'Plugin'. Two different types with this name exist, but they are unrelated.
                  Type '{ apply: (arg0: Resolver) => void; }' is not assignable to type 'Plugin'.
                    Type '{ apply: (arg0: Resolver) => void; }' is not assignable to type '{ apply: (arg0: import("/Users/Developer/React/node_modules/tsconfig-paths-webpack-plugin/lib/plugin.temp.types").Resolver) => void; }'.
                      Types of property 'apply' are incompatible.
                        Type '(arg0: Resolver) => void' is not assignable to type '(arg0: import("/Users/Developer/React/node_modules/tsconfig-paths-webpack-plugin/lib/plugin.temp.types").Resolver) => void'.
                          Types of parameters 'arg0' and 'arg0' are incompatible.
                            Type 'import("/Users/Developer/React/node_modules/tsconfig-paths-webpack-plugin/lib/plugin.temp.types").Resolver' is not assignable to type 'Resolver'.
                              The types of 'options.plugins' are incompatible between these types.
                                Type 'Plugin[]' is not assignable to type 'Plugin[]'. Two different types with this name exist, but they are unrelated.
                                  Type 'Plugin' is not assignable to type 'Plugin'. Two different types with this name exist, but they are unrelated.
                                    Type '{ apply: (arg0: Resolver) => void; }' is not assignable to type 'Plugin'.

112       new TsconfigPathsPlugin(),

import path from 'path';
import * as webpack from 'webpack';
import * as devServer from 'webpack-dev-server';
import CopyPlugin from 'copy-webpack-plugin';
import webpackMerge from 'webpack-merge';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';

const baseConfig: webpack.Configuration = {
  mode: 'production',
  target: 'browserslist',
  output: {
    filename: 'static/js/[name].[contenthash].js',
    path: path.resolve('dist'),
    publicPath: '/',
  },
  entry: path.resolve('src'),
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  ....
  resolve: {
    extensions: ['*', '.js', '.jsx', '.ts', '.tsx'],
    plugins: [
      new TsconfigPathsPlugin(),
    ],
  },
};

export default baseConfig;

export type WebpackConfig = webpack.Configuration & { devServer?: devServer.Configuration };
type WebpackMergeType = (...config: WebpackConfig[]) => WebpackConfig;

export const merge: WebpackMergeType = (...config) => webpackMerge(baseConfig, ...config);

[rnnyrk]

Still having the same issue with the latest versions. I tried looking at the types, but I can't figure it out myself and create a PR unfortunately. @jonaskello @Brian-McBride any idea maybe?

[stixx200]

Had the same issue. I resolved it by removing "loader-utils" from devDependencies.
Maybe you can install a better-matching version of loader-utils to fix this problem.

[sherwinwater]

same issue.

[bryan-hunt]

@rnnyrk @stixx200 @sherwinwater - For me I resolved it by upgrading the plugin to version 4 which imports the type from webpack rather than using the temporary types that version 3 did. Actually I also removed @types/webpack from my dependencies as well since webpack 5 has always provided types - I don't believe it would make any difference but I figured I'd mention it since I haven't tried only "tsconfig-paths-webpack-plugin": "^4.0.1" in my dependencies.