Typescript issue - Type 'Resolver' is missing the following properties from type 'Resolver': apply, plugints(2322)

[high1]

Hello, after updating deps, I'm getting this error in my webpack typescript configuration:

My guess is that there's an issue with never version of webpack type definitions - the one giving me issue here are "@types/webpack": "^4.41.25",.
The workaround for now is to disable typescript and eslint, and the plugin still works.
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore

[high1]

Turns out that the Webpack 5 is coming with integrated types, and that is the issue - the definition for the Resolver type inside the plugin conflicts with the one webpack provides. The Resolver type is not exported, so I'm not sure how one would implement the Resolver plugin with definitions for Webpack 5.

[rsimoes]

@high1 I've had some success going on little fishing expeditions for unexported webpack types. For example, the following seems to work:

import { NormalModule } from 'webpack';
type ResolverWithOptions = Pick<Parameters<NormalModule['createLoaderContext']>, 0>;

[brett-east]

@rsimoes can you elaborate on how you're using ResolverWithOptions as a type in this case?

I have this same issue, but I'm having no luck with the workaround of disabling ts-lint, I do that and instead get a second error,:

TypeError: 'get' on proxy: property 'tapAsync' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '(options, fn) => {
...

Failing that, can anyone suggest an alternative to TsconfigPathsPlugin.

FWIW and for anyone running into the same issue, this came about for me after installing @types/speed-measure-webpack-plugin which as a dependency has "@types/webpack": "*" - not sure if that's the cause.

[rsimoes]

@brett-east This module is going to need more separated implementation pieces for Webpack 5. Quite a bit of the API has changed, sadly.

[high1]

@rsimoes A lot of ecosystem has not caught up with the latest Webpack, so a lot of plugins depend on Webpack 4 types, and it's honestly a mess - not sure if it's worth pursuing Webpack 5 typed configurations for now actually.

[ThayalanGR]

    "@types/webpack": "4.41.25",
    "webpack": "5.11.0",

Use this version without prefixing it with '^', untill someone writes patch for this types problem.
Note: this problem arises from the webpack resolved version 5.11.5 (in package-lock.json) and @types/webpack 4.41.26.

[high1]

Webpack has it's types integrated in version 5, and mixing previous and current types results in a mess, that's why I switched to pure JS for now.

[nicobrinkkemper]

"devDependencies": {
    "@types/node": "^14.14.28",
    "image-minimizer-webpack-plugin": "^2.2.0",
    "ts-loader": "^8.0.17",
    "tsconfig-paths-webpack-plugin": "^3.3.0",
    "typescript": "^4.1.5",
    "webpack": "^5.22.0"
  }

Forces me to do this

const webpackConfig: webpack.Configuration = {
  resolve: {
      extensions: [".js", ".jsx", ".ts", ".tsx"],
      plugins: [
        new TsconfigPathsPlugin({
          configFile: "./tsconfig.json",
        }) as any,
      ]
    },
}    

Note the any here. Doesn't seem to prevent the plugin from working, though!

[spassvogel]

"devDependencies": {
    "@types/node": "^14.14.28",
    "image-minimizer-webpack-plugin": "^2.2.0",
    "ts-loader": "^8.0.17",
    "tsconfig-paths-webpack-plugin": "^3.3.0",
    "typescript": "^4.1.5",
    "webpack": "^5.22.0"
  }

Forces me to do this

const webpackConfig: webpack.Configuration = {
  resolve: {
      extensions: [".js", ".jsx", ".ts", ".tsx"],
      plugins: [
        new TsconfigPathsPlugin({
          configFile: "./tsconfig.json",
        }) as any,
      ]
    },
}    

Note the any here. Doesn't seem to prevent the plugin from working, though!

Rather than any, it might be better to cast as webpack.ResolvePluginInstance