Error using @types/webpack 5.28.0 on ts webpack config

[alexpagnotta-extendi]

Hi,

I've started a new project using webpack 5 with a typescript config, but when i add dotenv-webpack to the plugins i receive this error on new Dotenv() in webpack plugin definition:

Type 'DotenvWebpackPlugin' is not assignable to type '((this: Compiler, compiler: Compiler) => void) | WebpackPluginInstance'.
  Type 'DotenvWebpackPlugin' is not assignable to type 'WebpackPluginInstance'.ts(2322)

I've already found a workaround which is downgrading @types/webpack to the version 4.41.17 from the current 5.28.0, but i'm not sure if this is a problem with my config or with the plugin itself.

These are my dependencies and part of my config.

"devDependencies": {
    "@types/dotenv-webpack": "^7.0.1",
    "@types/html-webpack-plugin": "^3.2.5",
    "@types/node": "^14.14.37",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "@types/react-router-dom": "^5.1.7",
    "@types/styled-components": "^5.1.9",
    "@types/webpack": "^5.28.0",
    "@types/webpack-bundle-analyzer": "^4.4.0",
    "@types/webpack-dev-server": "^3.11.3",
    "@typescript-eslint/eslint-plugin": "^4.22.0",
    "@typescript-eslint/parser": "^4.22.0",
    "css-loader": "^5.2.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "path": "^0.12.7",
    "serve": "^11.3.2",
    "source-map-loader": "^2.0.1",
    "style-loader": "^2.0.0",
    "ts-loader": "^8.1.0",
    "ts-node": "^9.1.1",
    "tsconfig-paths-webpack-plugin": "^3.5.1",
    "typescript": "^4.2.4",
    "webpack": "^5.32.0",
    "webpack-bundle-analyzer": "^4.4.1",
    "webpack-cli": "^4.6.0"
  },
  "dependencies": {
    "dotenv": "^8.2.0",
    "dotenv-webpack": "^7.0.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "webpack-dev-server": "^3.11.2"
  }

import HtmlWebpackPlugin from 'html-webpack-plugin'
import path from 'path'
import webpack from 'webpack'
import Dotenv from 'dotenv-webpack'
import { clientFolder, appSourceFolder, makeConfiguration } from './config.base'

const dotenvDevelopmentPath = path.resolve(clientFolder, './.env.development')

require('dotenv').config({ path: dotenvDevelopmentPath })

const configuration = makeConfiguration({

 ... Omitted code 

  plugins: [
    new Dotenv({  // This give me the error
      systemvars: true,
      path: dotenvDevelopmentPath,
    }),
    new webpack.DefinePlugin({
      __DEV__: true,
      'process.env.NODE_ENV': JSON.stringify('development'),
      'process.env.BASE_URL': JSON.stringify(process.env.BASE_URL),
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({
      inject: true,
      template: path.resolve(appSourceFolder, 'index.development.html'),
    }),
  ],
})

export default configuration

[Hyunsujk]

I'm having the same issue. I downgraded @types/webpack to the version 4.41.17 liked you mentioned and it worked. Thank you! Here is part of my code if you'd like to see

import path from 'path';
import {
  Configuration as WebpackConfiguration,
  HotModuleReplacementPlugin,
  ProvidePlugin,
} from 'webpack';
import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import ESLintPlugin from 'eslint-webpack-plugin';
import Dotenv from 'dotenv-webpack';

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration;
}

const config: Configuration = {
... 
plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
    }),
    new HotModuleReplacementPlugin(),
    new ForkTsCheckerWebpackPlugin({
      async: false,
    }),
    new ESLintPlugin({
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    }),
    new ProvidePlugin({
      process: 'process/browser',
    }),
    new Dotenv({ path: path.resolve(__dirname, './.env') }),
  ],
... 
}

export default config;

[mrsteele]

I'm not a typescript dev unfortunately. Looking for help from the typescript community on this one...

[0xBigBoss]

this is a hack but seems to do the trick

 new Dotenv({
      defaults: true,
      systemvars: true,
      safe: true,
    }) as unknown as WebpackPluginInstance,

[mrsteele]

Thanks @0xBigBoss