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

[vitaliyhayda]

error log points to a different library of "html-webpack-preconnect-plugin" but the error only happens when I update "html-webpack-plugin" from 3.2.0 to 4.0.3

TypeError: Cannot read property 'tapAsync' of undefined at /Users/mypath/node_modules/html-webpack-preconnect-plugin/index.js:37:57 at SyncHook.eval [as call] (eval at create (/Users/mypath/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:13:1) at SyncHook.lazyCompileHook (/Users/mypath/node_modules/tapable/lib/Hook.js:154:20) at Compiler.newCompilation (/Users/mypath/node_modules/webpack/lib/Compiler.js:631:26) at /Users/mypath/node_modules/webpack/lib/Compiler.js:667:29 at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/mypath/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1) at AsyncSeriesHook.lazyCompileHook (/Users/mypath/node_modules/tapable/lib/Hook.js:154:20) at Compiler.compile (/Users/mypath/node_modules/webpack/lib/Compiler.js:662:28) at /Users/mypath/node_modules/webpack/lib/Watching.js:77:18 at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/mypath/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1) at AsyncSeriesHook.lazyCompileHook (/Users/mypath/node_modules/tapable/lib/Hook.js:154:20) at Watching._go (/Users/mypath/node_modules/webpack/lib/Watching.js:41:32) at /Users/mypath/node_modules/webpack/lib/Watching.js:33:9 at Compiler.readRecords (/Users/mypath/node_modules/webpack/lib/Compiler.js:529:11) at new Watching (/Users/mypath/node_modules/webpack/lib/Watching.js:30:17) at Compiler.watch (/Users/mypath/node_modules/webpack/lib/Compiler.js:244:10) at /Users/mypath/node_modules/webpack/lib/MultiCompiler.js:210:30 at /Users/mypath/node_modules/webpack/lib/MultiCompiler.js:185:6 at arrayEachIndex (/Users/mypath/node_modules/neo-async/async.js:2548:9) at Object.map (/Users/mypath/node_modules/neo-async/async.js:2900:9) at runCompilers (/Users/mypath/node_modules/webpack/lib/MultiCompiler.js:182:13) at MultiCompiler.runWithDependencies (/Users/mypath/node_modules/webpack/lib/MultiCompiler.js:194:3) at MultiCompiler.watch (/Users/mypath/node_modules/webpack/lib/MultiCompiler.js:205:9) at processOptions (/Users/mypath/node_modules/webpack-cli/bin/cli.js:350:14) at /Users/mypath/node_modules/webpack-cli/bin/cli.js:364:3 at Object.parse (/Users/mypath/node_modules/webpack-cli/node_modules/yargs/yargs.js:567:18) at /Users/mypath/node_modules/webpack-cli/bin/cli.js:49:8 at Object.<anonymous> (/Users/mypath/node_modules/webpack-cli/bin/cli.js:366:3)

[Sombian]

i can confirm this is indeed an issue.

[andrei-inc]

+1
Something that worked for me:
npm i --save-dev [email protected]

[jantimon]

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:

[andrei-inc]

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

[mcglabs]

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:

[marcoippolito]

I followed the indications above: npm install html-webpack-inline-source-plugin@beta :
in package.json :

"html-webpack-inline-source-plugin": "^1.0.0-beta.2",

and in webpack.config.js I have these plugins:

plugins: [
  new webpack.IgnorePlugin(/^pg-native$/, /^dns$, /^uws$),
  new HtmlWebpackPlugin({
                inlineSource: '.(js|css)$' // embed all javascript and css inline
  }),
  new HtmlWebpackInlineSourcePlugin(HtmlPlugin)
  })
],

But still get "Cannot read property 'tapAsync' of undefined"

[seantcanavan]

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

> [email protected] 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! [email protected] build: `webpack`
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!     /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": "[email protected]: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.

[LeDanielH]

@seantcanavan downgrading to "html-webpack-plugin": "3.2.0" worked for me too. Thanks

[MikeMitterer]

I was tired of waiting for a new version of
html-beautify-webpack-plugin (this plugin causes the problem and seems to be dead on GH) so I switched to beautify-html-webpack-plugin - solves the problem

[jantimon]

Yes unfortunately this breaking change caused another trouble.. it was done to be aligned with webpack.

Maybe you can help the plugin maintainers by sending a pull request.

[MikeMitterer]

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

[gabor-ottlik-epam]

I've run into the same error. For me reverting webpack version back to ^4 was the solution.

[jantimon]

@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

[alpo22]

I was having this TypeError: Cannot read property 'tapAsync' of undefined error as well. I did not have html-webpack-plugin installed. Installing it resolved the issue:

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

[jantimon]

As said before this problem is no longer caused by the html-webpack-plugin but by other plugins.

Please make sure that you are using the latest webpack and html-webpack-plugin versions.