CODEWITHSUNDEEP
webpackhtml-webpack-plugin
Tokyo Mr
Tokyo Mr

Reputation: 27

webpack HtmlWebpackPlugin is not a constructor?

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?

Upvotes: 1

Views: 2516

Answers (2)

DavidP
DavidP

Reputation: 69

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:

  1. Add only the import you want to try, not any invocation
  2. Place a breakpoint just after the import, such as by inserting debugger;
  3. 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.

Upvotes: 0

Rowan Freeman
Rowan Freeman

Reputation: 16378

Shouldn't it be like this?

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

Upvotes: 6

Related Questions