html-webpack-plugin: TypeError: Cannot read property 'tapAsync' of undefined

Receiving this error using the react redux simple starter project deploying to github pages. I have an extremely simplified package.json contents but even then I’m not sure which other dependency is causing the compatibility issue because this is the only webpack plugin that I’ve installed so far and I’m still learning a lot about webpack.

error output:

: npm run build

> redux-simple-starter@1.0.0 build /home/userhome/seantcanavan.github.io
> webpack

/home/userhome/seantcanavan.github.io/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:182
    compiler.hooks.make.tapAsync(
                   ^

TypeError: Cannot read property 'make' of undefined
    at PersistentChildCompilerSingletonPlugin.apply (/home/userhome/seantcanavan.github.io/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:182:20)
    at new CachedChildCompilation (/home/userhome/seantcanavan.github.io/node_modules/html-webpack-plugin/lib/cached-child-compiler.js:68:44)
    at HtmlWebpackPlugin.apply (/home/userhome/seantcanavan.github.io/node_modules/html-webpack-plugin/index.js:92:33)
    at Compiler.apply (/home/userhome/seantcanavan.github.io/node_modules/tapable/lib/Tapable.js:164:16)
    at WebpackOptionsApply.process (/home/userhome/seantcanavan.github.io/node_modules/webpack/lib/WebpackOptionsApply.js:62:18)
    at webpack (/home/userhome/seantcanavan.github.io/node_modules/webpack/lib/webpack.js:22:48)
    at processOptions (/home/userhome/seantcanavan.github.io/node_modules/webpack/bin/webpack.js:152:17)
    at Object.<anonymous> (/home/userhome/seantcanavan.github.io/node_modules/webpack/bin/webpack.js:192:1)
    at Module._compile (internal/modules/cjs/loader.js:1201:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
    at Module.load (internal/modules/cjs/loader.js:1050:32)
    at Function.Module._load (internal/modules/cjs/loader.js:938:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! redux-simple-starter@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the redux-simple-starter@1.0.0 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!     /home/userhome/.npm/_logs/2020-07-01T03_06_33_804Z-debug.log

package.json contents:

{
  "homepage": "http://seantcanavan.github.io/seantcanavan.github.io",
  "name": "redux-simple-starter",
  "version": "1.0.0",
  "description": "Simple starter package for Redux with React and Babel support",
  "main": "index.js",
  "repository": "git@github.com:seantcanavan/seantcanavan.github.io.git",
  "scripts": {
    "build": "webpack",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build",
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
    "test:watch": "npm run test -- --watch"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "chai": "^3.5.0",
    "chai-jquery": "^2.0.0",
    "gh-pages": "^3.1.0",
    "html-webpack-plugin": "3.2.0",
    "jquery": "^3.0.0",
    "jsdom": "^8.1.0",
    "mocha": "^2.4.5",
    "react-addons-test-utils": "^0.14.7",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "babel-preset-stage-1": "^6.1.18",
    "lodash": "^3.10.1",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-redux": "4.3.0",
    "react-router": "^2.0.1",
    "react-router-dom": "^4.0.0",
    "redux": "^3.0.4",
    "redux-form": "^6.6.3",
    "redux-promise": "^0.5.3"
  }
}

webpack.config.js contents:

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

module.exports = {
  entry: [
    './src/index.js'
  ],
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Sean Test Server',
    }),
  ],
  output: {
    path: "build/",
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

I’m not sure which dependency was causing the issue but I did manage to fix it by downgrading "html-webpack-plugin": "^4.3.0", to "html-webpack-plugin": "3.2.0",

Hopefully this helps someone else via google who’s also trying to learn webpack.

This error means your plugin is not compatible with html-webpack-plugin 4.x

The error tells you also which plugin is incompatible:

TypeError: Cannot read property ‘tapAsync’ of undefined
at /Users/mypath/node_modules/html-webpack-preconnect-plugin/index.js:37:57

So in this case html-webpack-preconnect-plugin has to upgrade to the new hooks:

@jantimon The problem is that there is already a PR - since the 11th of May…

@jantimon seems that you’re right. Inline-source-map plugin was the issue on my side. I found the solution over there:

@gabor-ottlik-epam TypeError: Cannot read property 'tapAsync' of undefined is thrown whenever a webpack event is used which does not exist… - so I am not sure if your problem is related at all

Frustrating not to include the original link: https://github.com/DustinJackson/html-webpack-inline-source-plugin/issues/75

@jantimon seems that you’re right. Inline-source-map plugin was the issue on my side. I found the solution over there: