webpack HtmlWebpackPlugin is not a constructor?

Question

package.json

   {
      "name": "test2",
      "version": "1.0.0",
      "description": "",
      "main": "webpack.config.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "html-webpack-plugin": "^4.5.0",
        "webpack": "^5.1.3",
        "webpack-cli": "^4.1.0"
      }
    }

webpack.config.js

const {resolve} = require('path');
const {HtmlWebpackPlugin} = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
 
    plugins: [
        new HtmlWebpackPlugin({template: './src/webpack.html'})
    ],
    mode: 'development'
};

My Error:

[webpack-cli] TypeError: HtmlWebpackPlugin is not a constructor
    at Object.<anonymous> (D:\webpack workspace\test2\webpack.config.js:16:9)
    at Module._compile (D:\webpack workspace\test2\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (D:\webpack workspace\test2\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at requireConfig (D:\webpack workspace\test2\node_modules\webpack-cli\lib\groups\ConfigGroup.js:73:18)
    at Array.map (<anonymous>)

I am curious about why the error message "HtmlWebpackPlugin is not a constructor!" WHY?
I am curious about why the error message "HtmlWebpackPlugin is not a constructor!" WHY?
I am curious about why the error message "HtmlWebpackPlugin is not a constructor!" WHY?

Rowan Freeman · Accepted Answer · 2020-10-21 09:21:30Z

6

Shouldn't it be like this?

const HtmlWebpackPlugin = require('html-webpack-plugin');

answered Oct 21, 2020 at 9:21

Rowan Freeman

16.5k12 gold badges72 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DavidP · Accepted Answer · 2024-12-21 10:47:23Z

Rowan Freeman's 2020 answer doesn't work for me; it's December 2024 right now, and I'm using the current html-webpack-plugin 5.6.0 on RsPack (which supports almost all of the api of webpack5, so I think this answer applies to webpack5 as well). I'm also using an RsPack .mjs script to invoke the RsPack JS api, not a .js, so I needed to use mHtmlWebpackPlugin = await import("html-webpack-plugin") instead of require.

What does work is to invoke the plugin with .default like this:

plugins: [
             new mHtmlWebpackPlugin.default({
                 template: "template.html"
             })
         ]

I discovered this in the following way:

Add only the import you want to try, not any invocation
Place a breakpoint just after the import, such as by inserting debugger;
Run the build script in debug mode (I used VSCode) and when the breakpoint is reached, examine the structure of what was imported.

Note that you don't have to name the import mHtmlWebpackPlugin; you can strip the leading m or name it whatever you want.

Btw, static import import * as mHtmlWebpackPlugin from "html-webpack-plugin"; also works.

Collectives™ on Stack Overflow

webpack HtmlWebpackPlugin is not a constructor?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related