npm run build error for html-webpack-plugin

Question

Hey so I am new to webpack and I am trying to use it for a project using the Cesium js api. I am following their tutorial online to the T but for some reason when I run the command "npm run build" I get the following error without it executing properly.

Peris-MacBook-Pro:App peri$ npm run build

> [email protected] build /Users/peri/Desktop/App
> webpack --config webpack.config.js

(node:23326) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:23326) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
/Users/peri/Desktop/App/node_modules/html-webpack-plugin/lib/compiler.js:81
        var outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {
                                                  ^

TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
    at /Users/peri/Desktop/App/node_modules/html-webpack-plugin/lib/compiler.js:81:51
    at compile (/Users/peri/Desktop/App/node_modules/webpack/lib/Compiler.js:222:11)
    at hooks.afterCompile.callAsync.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compiler.js:470:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/peri/Desktop/App/node_modules/tapable/lib/Hook.js:35:21)
    at compilation.seal.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compiler.js:467:30)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/peri/Desktop/App/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.optimizeAssets.callAsync.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:957:35)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/peri/Desktop/App/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.optimizeChunkAssets.callAsync.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:948:32)
    at _err0 (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
    at /Users/peri/Desktop/App/node_modules/uglifyjs-webpack-plugin/dist/index.js:262:11
    at _class.runTasks (/Users/peri/Desktop/App/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:63:9)
    at UglifyJsPlugin.optimizeFn (/Users/peri/Desktop/App/node_modules/uglifyjs-webpack-plugin/dist/index.js:182:16)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/peri/Desktop/App/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.additionalAssets.callAsync.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:943:36)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/peri/Desktop/App/node_modules/tapable/lib/Hook.js:35:21)
    at hooks.optimizeTree.callAsync.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:939:32)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/peri/Desktop/App/node_modules/tapable/lib/Hook.js:35:21)
    at Compilation.seal (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:881:27)
    at hooks.make.callAsync.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compiler.js:464:17)
    at _err0 (eval at create (/Users/peri/Desktop/App/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
    at _addModuleChain (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:749:12)
    at processModuleDependencies.err (/Users/peri/Desktop/App/node_modules/webpack/lib/Compilation.js:688:9)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `webpack --config webpack.config.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build 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!     /Users/peri/.npm/_logs/2018-02-27T04_17_33_336Z-debug.log

I have this in my wepack.config.js file:

const path = require('path');

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

module.exports = {
    context: __dirname,
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }, {
            test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
            use: [ 'url-loader' ]
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
};

and I have added the following script line in my package.json

  "scripts": {
    "build": "node_modules/.bin/webpack --config webpack.config.js"
  }

I am not sure what I am doing wrong.. I tried to see if the warnings were the issue but that doesn't seem to be it. I am assuming its that function that is causing the error, but how do I fix it? Many Thanks!

Answer 1

Webpack 4 has some deprecation changes and an author of the html-webpack-plugin hasn't changed the code for the new requirements and that's why this plugin doesn't work with the new webpack 4 version.

The core webpack team forked this plugin till the author change the initial code and theirs fork available by this package contrib/html-webpack-plugin

So you should install this fork instead the original one.

You can do it by simply installing from npm or yarn eg

npm i -D html-webpack-plugin@webpack-contrib/html-webpack-plugin

or with yarn

yarn add -D html-webpack-plugin@webpack-contrib/html-webpack-plugin

There are no requirement to use exactly yarn =) you can do it via npm as well

More detailed info: Webpack 4 release announce

Answer 2

I fixed this issue by installing the beta version of HTML Webpack Plugin.

npm i --save-dev html-webpack-plugin@next

Answer 3

For those who are looking for an updated solution to this question, the module webpack-contrib/html-webpack-plugin does not exist anymore. For more details you may look up at the discussion here. The solution,npm install html-webpack-plugin --save-dev works. If this throws a run time error described in the OP's question, you can try installing a version specific module, npm i [email protected]. Hopefully this should work for you, as it did for me.