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'))

Nessi

Answer 1

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

Alisaalisan

This seems to work. Not sure why though since I don't know where the plugin interacts with typescript code? – Thundery

Your webpack setting connects both of the ts and html plugin. So when you run the webpack, you set up the ts as your loader, and also you try to use HTML plugin. I think that's why your ts compiler will try to look for the type definition of the HTML plugin. – Alisaalisan

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

Strait

Answer 3

I solved my problem downgrading html-webpack-plugin to 3.2.0

I also had to downgrade jest, babel-jest and terser-webpack-plugin to solve a similar problem with jest-worker

Now it compiles without errors

Nessi