Incompatibility with html-webpack-plugin

MikeMitterer commented 4 years ago

Installing html-webpack-plugin 4.0.1 leads to

/Volumes/DevLocal/DevTypeScript/Production/mobiad/mobiservice/node_modules/html-beautify-webpack-plugin/index.js:46
            compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tapAsync('HtmlBeautifyPlugin', (htmlPluginData, callback) => {
                                                                   ^

TypeError: Cannot read property 'tapAsync' of undefined
    at /Volumes/DevLocal/DevTypeScript/Production/mobiad/mobiservice/node_modules/html-beautify-webpack-plugin/index.js:46:68
    at SyncHook.eval [as call] (eval at create (/Volumes/DevLocal/DevTypeScript/Production/mobiad/mobiservice/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:5:1)
    at SyncHook.lazyCompileHook (/Volumes/DevLocal/DevTypeScript/Production/mobiad/mobiservice/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/Volumes/DevLocal/DevTypeScript/Production/mobiad/mobiservice/node_modules/webpack/lib/Compiler.js:631:26)
    at /Volumes/DevLocal/DevTypeScript/Production/mobiad/mobiservice/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Volumes/DevLocal/DevTypeScript/Production/mobiad/mobiservice/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)
    at AsyncSeriesHook.lazyCompileHook (/Volumes/DevLocal/DevTypeScript/Production/mobiad/mobiservice/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.compile (/Volumes/DevLocal/DevTypeScript/Production/mobiad/mobiservice/node_modules/webpack/lib/Compiler.js:662:28)
    at /Volumes/DevLocal/DevTypeScript/Production/mobiad/mobiservice/node_modules/webpack/lib/Watching.js:77:18
    at _next0 (eval at create (/Volumes/DevLocal/DevTypeScript/Production/mobiad/mobiservice/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:23:1)
    at eval (eval at create (/Volumes/DevLocal/DevTypeScript/Production/mobiad/mobiservice/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:32:1)
    at LiveReloadPlugin.serverStarted (/Volumes/DevLocal/DevTypeScript/Production/mobiad/mobiservice/node_modules/webpack-livereload-plugin/index.js:89:9)
    at Object.onceWrapper (events.js:421:28)
    at Server.emit (events.js:315:20)
    at emitListeningNT (net.js:1347:10)
    at processTicksAndRejections (internal/process/task_queues.js:83:21)

MikeMitterer commented 4 years ago

Here they explain why this error occurs: https://github.com/jantimon/html-webpack-plugin/issues/1377

impcyber commented 4 years ago

Try this:

const HtmlWebpackPlugin = require('html-webpack-plugin')
...
    } else {
        compiler.hooks.compilation.tap('HtmlBeautifyPlugin', compilation => {
          let hook = compilation.hooks.htmlWebpackPluginAfterHtmlProcessing
            ? compilation.hooks.htmlWebpackPluginAfterHtmlProcessing
            : HtmlWebpackPlugin.getHooks(compilation).beforeEmit

          hook.tapAsync('HtmlBeautifyPlugin', (htmlPluginData, callback) => {
            htmlPluginDataFunction(htmlPluginData, callback, this)
          })
        })
    }

rnurminen commented 3 years ago

Try this:

const HtmlWebpackPlugin = require('html-webpack-plugin')
...
    } else {
        compiler.hooks.compilation.tap('HtmlBeautifyPlugin', compilation => {
          let hook = compilation.hooks.htmlWebpackPluginAfterHtmlProcessing
            ? compilation.hooks.htmlWebpackPluginAfterHtmlProcessing
            : HtmlWebpackPlugin.getHooks(compilation).beforeEmit

          hook.tapAsync('HtmlBeautifyPlugin', (htmlPluginData, callback) => {
            htmlPluginDataFunction(htmlPluginData, callback, this)
          })
        })
    }

I took your fix and forked https://www.npmjs.com/package/@nurminen/html-beautify-webpack-plugin

Works with webpack5 and latest HtmlWebpackPlugin 🙂

impcyber commented 3 years ago

@rnurminen Thank you!

seeyoulater / html-beautify-webpack-plugin

Incompatibility with html-webpack-plugin #9