Type 'BundleAnalyzerPlugin' is not assignable to type 'WebpackPluginInstance'.

ziyoonee commented 3 years ago

Issue description

I found this problem in webpack.config.ts

Argument of type 'BundleAnalyzerPlugin' is not assignable to parameter of type '((this: Compiler, compiler: Compiler) => void) | WebpackPluginInstance'.
  Type 'BundleAnalyzerPlugin' is not assignable to type 'WebpackPluginInstance'.
    Types of property 'apply' are incompatible.
      Type '(compiler: import("~/node_modules/@types/webpack-bundle-analyzer/node_modules/@types/webpack/index").Compiler) => void' is not assignable to type '(compiler: import("~/node_modules/webpack/types").Compiler) => void'.
        Types of parameters 'compiler' and 'compiler' are incompatible.
          Property '_pluginCompat' is missing in type 'import("~/node_modules/webpack/types").Compiler' but required in type 'import("~/node_modules/@types/webpack-bundle-analyzer/node_modules/@types/webpack/index").Compiler'.

Technical info

webpack.config.ts source code

 config.plugins.push(new webpack.HotModuleReplacementPlugin());
  config.plugins.push(new ReactRefreshWebpackPlugin());
  config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: true }));

package info

"dependencies": {
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "@types/react-router-dom": "^5.1.7",
    "css-loader": "^5.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "style-loader": "^2.0.0",
    "ts-node": "^9.1.1",
    "typescript": "^4.2.4"
  },
  "devDependencies": {
    "@babel/core": "^7.13.15",
    "@babel/preset-env": "^7.13.15",
    "@babel/preset-react": "^7.13.13",
    "@babel/preset-typescript": "^7.13.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "@types/node": "^14.14.28",
    "@types/webpack-dev-server": "^3.11.3",
    "@typescript-eslint/eslint-plugin": "^4.21.0",
    "@typescript-eslint/parser": "^4.21.0",
    "babel-loader": "^8.2.2",
    "bable-loader": "0.0.1-security",
    "eslint": "^7.23.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.23.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "fork-ts-checker-webpack-plugin": "^6.2.1",
    "prettier": "^2.2.1",
    "react-refresh": "^0.10.0",
    "webpack": "^5.22.0",
    "webpack-bundle-analyzer": "^4.4.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2",
    "@types/webpack": "^4.41.27",
    "@types/webpack-bundle-analyzer": "^3.9.1"
  }

Debug info

detail error message

node_modules/@types/webpack-bundle-analyzer/node_modules/@types/webpack/index.d.ts:1466:9 1466 _pluginCompat: SyncBailHook;


    '_pluginCompat' is declared here.

Could you please tell me what is wrong here?

alexander-akait commented 3 years ago

Remove @types/webpack, you don't need this

ziyoonee commented 3 years ago

Remove @types/webpack, you don't need this

Remove @types/webpack , throw same error

Downgrade webpack version to 4, It works for me.. Is there any other way to use webpack 5?

th0r commented 3 years ago

We don't maintain @types/webpack-bundle-analyzer package. Run npm home @types/webpack-bundle-analyzer in the terminal and open an issue in their repo please.

webpack-contrib / webpack-bundle-analyzer