Vuejs Preload Plugin fails with HtmlWebpackPlugin.getHooks is not a function

Question

A snippet of my package.json

"vue": "^2.6.11",
"@vue/preload-webpack-plugin": "^2.0.0",

vue.config.js file,

const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin')
const VuePreloadPlugin = require('@vue/preload-webpack-plugin')

const myCompressionPlug = new CompressionPlugin({
  algorithm: 'gzip',
  test: /\.js$|\.css$|\.png$|\.svg$|\.jpg$|\.woff2$/i,
  deleteOriginalAssets: false,
})

const myPreloadPlug = new VuePreloadPlugin({
  rel: 'preload',
  fileBlacklist: [/\.js/]
})

module.exports = {
  productionSourceMap: process.env.NODE_ENV !== 'production',
  chainWebpack: (config) => {
    config.plugins.delete('prefetch')
    config.plugin('CompressionPlugin').use(myCompressionPlug)
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach((type) => addStyleResource(config.module.rule('stylus').oneOf(type)))
    config.plugin('PreloadPlugin').use(myPreloadPlug)
  },
}

function addStyleResource(rule) {
  rule
    .use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [path.resolve(__dirname, './src/styles/sass/*.scss')],
    })
}

Error,

ERROR TypeError: HtmlWebpackPlugin.getHooks is not a function

TypeError: HtmlWebpackPlugin.getHooks is not a function

OS: MacOS BigSur

Answer 1

I was able to add the preload Webpack plugin by putting it in the configureWebpack object, instead of the chainWebpack object.

So the configureWebpack object would look like this:

configureWebpack: {
    plugins: [myPreloadPlug]
},

Your vue.config.js file would then look like the following:

const path = require('path')
const CompressionPlugin = require('compression-webpack-plugin')
const VuePreloadPlugin = require('@vue/preload-webpack-plugin')

const myCompressionPlug = new CompressionPlugin({
  algorithm: 'gzip',
  test: /\.js$|\.css$|\.png$|\.svg$|\.jpg$|\.woff2$/i,
  deleteOriginalAssets: false,
})

const myPreloadPlug = new VuePreloadPlugin({
  rel: 'preload',
  fileBlacklist: [/\.js/]
})

module.exports = {
  productionSourceMap: process.env.NODE_ENV !== 'production',
  chainWebpack: (config) => {
    config.plugins.delete('prefetch')
    config.plugin('CompressionPlugin').use(myCompressionPlug)
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach((type) => addStyleResource(config.module.rule('stylus').oneOf(type)))
  },
  configureWebpack: {
    plugins: [myPreloadPlug]
  },
}

function addStyleResource(rule) {
  rule
    .use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [path.resolve(__dirname, './src/styles/sass/*.scss')],
    })
}