tsconfig-paths-webpack-plugin icon indicating copy to clipboard operation
tsconfig-paths-webpack-plugin copied to clipboard

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

Open high1 opened this issue 3 years ago • 9 comments

Hello, after updating deps, I'm getting this error in my webpack typescript configuration: image 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 avatar Dec 31 '20 16:12 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.

high1 avatar Jan 04 '21 01:01 high1

@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>;

rsimoes avatar Jan 10 '21 15:01 rsimoes

@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.

brett-east avatar Jan 14 '21 12:01 brett-east

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

rsimoes avatar Jan 14 '21 17:01 rsimoes

@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.

high1 avatar Jan 15 '21 09:01 high1

    "@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.

ThayalanGR avatar Jan 18 '21 02:01 ThayalanGR

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.

high1 avatar Jan 18 '21 09:01 high1

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

nicobrinkkemper avatar Feb 17 '21 12:02 nicobrinkkemper