Webpack config error with html-webpack-plugin for creating index.html

Question

I'm trying some POC with webpack for bundling project JS files.

I want to create an index.html file under output dist folder via webpack. For this purpose as per webpack documentation, installed "html-web-plugin" via npm as :

npm install --save-dev html-webpack-plugin

It updates in package.json file as below:

  "devDependencies": {
    "html-webpack-plugin": "^4.3.0"
  }

Used this plugin in webpack.config.js as per documentation of webpack:

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

And inside config object:

plugins: [
 new HtmlWebpackPlugin(
    title: 'Output Management'
 )
],

To run npm scripts, used below code in package.json file:

"scripts": {
  "devNoServer": "webpack --d --watch",
  "dev": "webpack-dev-server",
  "build": "webpack -p",
  "test": "echo \"Error: no test specified\" && exit 1"
},

On running npm run dev OR npm run build command, getting below error which seems related to html-web-plugin:

/<PROJECT_PATH>/node_modules/webpack-dev-server/bin/webpack-dev-server.js:373
    throw e;
    ^

TypeError: Cannot read property 'make' of undefined
    at PersistentChildCompilerSingletonPlugin.apply (/<PROJECT_PATH>/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:182:20)
    at new CachedChildCompilation (/<PROJECT_PATH>/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:68:44)
    at HtmlWebpackPlugin.apply (/<PROJECT_PATH>/node_modules/html-webpack-plugin/index.js:92:33)
    at Compiler.apply (/<PROJECT_PATH>/node_modules/tapable/lib/Tapable.js:375:16)
    at webpack (/<PROJECT_PATH>/node_modules/webpack/lib/webpack.js:33:19)
    at startDevServer (/<PROJECT_PATH>/node_modules/webpack-dev-server/bin/webpack-dev-server.js:367:16)
    at /<PROJECT_PATH>/node_modules/webpack-dev-server/bin/webpack-dev-server.js:358:5
    at /<PROJECT_PATH>/node_modules/portfinder/lib/portfinder.js:196:16
    at /<PROJECT_PATH>/node_modules/async/dist/async.js:473:16
    at replenish (/<PROJECT_PATH>/node_modules/async/dist/async.js:1006:25)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /<USER_DIR>/.npm/_logs/2020-06-17T14_50_38_388Z-debug.log

Without using "html-webpack-plugin", npm run dev OR npm run build command works fine and create bundle.js in dist folder.

Is there something I'm doing wrong for using "html-webpack-plugin"?? I'm unable to find this error and it's fix anywhere.

Any input/ solutions will be really helpful.

You can take a look at line 182 of node_modules/html-webpack-plugin/lib/cached-child-compiler.js to see what is this make and then you can run it like npm run serve --inspect-brk to initiate a debug session and eventually put a breakpoint at the above mentioned line to further investigate the issue. — IVO GELOV

Sagar Devanga Sagar Devanga · Accepted Answer · 2020-06-28T16:10:08

Ok after hours of looking here and there, reading loads of documentation.This worked for me. I was using this "html-webpack-plugin": "^4.3.0" So I reverted back to using [email protected] and the make command worked. Dont know for sure but could be version's issue.

Webpack config error with html-webpack-plugin for creating index.html

1 Answers