Too many errors on html-webpack-plugin when using typescript

Question

I am starting a project using Webpack and typescript. But when I try to run the dev server I get a lot of errors on html-webpack-plugin. This is my output:

> [email protected] dev /home/alejo/tecnimaq/tecnilab/tecnilab-frontend
> cross-env NODE_ENV=development webpack-dev-server --mode=development --inline --hot
 
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./public
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢wdm｣: wait until bundle finished: /
✖ ｢wdm｣: Hash: 9d40f5b1be348f5478dc
Version: webpack 4.43.0
Time: 10565ms
Built at: 21/07/2020 11:05:56 a. m.
     Asset       Size  Chunks             Chunk Names
 bundle.js   3.82 MiB    main  [emitted]  main
index.html  369 bytes          [emitted]  
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.tsx 52 bytes {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./src/index.tsx] 218 bytes {main} [built]
    + 36 hidden modules
 
ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js
[tsl] ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js(16,19)
      TS2306: File '/home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/lodash/lodash.js' is not a module.
 
ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js
[tsl] ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js(183,15)
      TS2322: Type 'this' is not assignable to type 'HtmlWebpackPlugin'.
  Type 'import("/home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index")' is not assignable to type 'import("/home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/typings")'.
    Types of property 'apply' are incompatible.
      Type '(compiler: import("/home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/webpack/lib/Compiler")) => void' is not assignable to type '(compiler: import("/home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/@types/webpack/index").Compiler) => void'.
        Types of parameters 'compiler' and 'compiler' are incompatible.
          Type 'Compiler' is missing the following properties from type 'Compiler': parentCompilation, recordsInputPath, recordsOutputPath, records, and 21 more.
 
ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js
[tsl] ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js(201,13)
      TS2322: Type 'this' is not assignable to type 'HtmlWebpackPlugin'.
 
ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js
[tsl] ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js(213,15)
      TS2322: Type 'this' is not assignable to type 'HtmlWebpackPlugin'.

There are a lot more errors, I had to truncate it so it can fit on this stackoverflow question, full output in https://pastebin.com/NJXnbkAq

Please tell me if you need any more details to know the cause of this issue

This is my package.json:

{
  "name": "tecnilab-frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --mode=development --inline --hot",
    "prestart": "npm run build",
    "start": "sirv build -s -e",
    "prebuild": "mkdirp build",
    "build": "cross-env NODE_ENV=production webpack --mode=production --progress",
    "test": "jest --watchAll --passWithNoTests",
    "lint": "find . -path ./node_modules -prune -o -type f \\( -iname \\*\\.ts -o -iname \\*.tsx -o -iname \\*.js -o -iname \\*\\.jsx \\) -print | xargs -I{} npx eslint {}",
    "lintFix": "find . -path ./node_modules -prune -o -type f \\( -iname \\*\\.ts -o -iname \\*.tsx -o -iname \\*.js -o -iname \\*\\.jsx \\) -print | xargs -I{} npx eslint --fix {}"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^3.7.0",
    "@typescript-eslint/parser": "^3.7.0",
    "eslint": "^7.5.0",
    "eslint-config-standard": "^14.1.1",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.20.3",
    "eslint-plugin-standard": "^4.0.1",
    "jest": "^26.1.0"
  },
  "dependencies": {
    "@babel/core": "^7.10.5",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "@testing-library/jest-dom": "^5.11.1",
    "@testing-library/react": "^10.4.7",
    "@testing-library/user-event": "^12.0.11",
    "@types/jest": "^26.0.5",
    "@types/node": "^14.0.24",
    "@types/react": "^16.9.43",
    "@types/react-dom": "^16.9.8",
    "autoprefixer": "^9.8.5",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.1.0",
    "babel-loader": "^8.1.0",
    "babel-preset-jest": "^26.1.0",
    "bootstrap": "^5.0.0-alpha1",
    "cross-env": "^7.0.2",
    "css-loader": "^3.6.0",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "postcss-loader": "^3.0.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-test-renderer": "^16.13.1",
    "sass": "^1.26.10",
    "sass-loader": "^9.0.2",
    "style-loader": "^1.2.1",
    "terser-webpack-plugin": "^3.0.7",
    "ts-loader": "^8.0.1",
    "typescript": "^3.9.7",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

My webpack.config.js

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const ENV = process.env.NODE_ENV || 'development'

module.exports = {
  entry: './src/index.tsx',

  devtool: 'inline-source-map',

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.(ts|tsx)?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader', // inject CSS to page
          'css-loader', // translates CSS into CommonJS modules
          {
            loader: 'postcss-loader', // Run postcss actions
            options: {
              plugins: function () { // postcss plugins, can be exported to postcss.config.js
                return [
                  require('autoprefixer')
                ]
              }
            }
          },
          'sass-loader' // compiles Sass to CSS
        ]
      }

    ]
  },

  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },

  node: {
    browser: true,
    node: true
  },

  optimization: {
    minimizer: [
      new TerserPlugin({
        cache: true,
        parallel: true,
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
        }
      })
    ]
  },

  plugins: ([
    new MiniCssExtractPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(ENV)
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      hash: true,
      minify: { collapseWhitespace: true }
    })
  ]).concat(ENV === 'production' ? [
    new webpack.ProgressPlugin()
  ] : []),
  devServer: {
    port: process.env.PORT || 8080,
    host: 'localhost',
    publicPath: '/',
    contentBase: './public',
    historyApiFallback: true,
    open: true,
    openPage: ''
  }
}

And my index.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './css/main.scss'

ReactDOM.render(<App message="The count is:"/>, document.getElementById('root'))

Answer 1

Try to add @types/html-webpack-plugin to your devDependencies, hope it works. :)

Answer 2

I found that exactly HtmlWebpackPlugin does not work well with ts-loader.

In my case I just had to add "moduleResolution": "node" to tsconfig.json

It is recommended in TS docs on module resolution strategy