title: How to solve webpack plugin compilation error
body: <p>I am in the process of migrating my node.js project. I just upgraded to Webpack 4 and I can't compile the project after running <code>npm run dev</code>. It throws the following error:</p>
  
  <pre><code>Error: Plugin could not be registered at 'html-webpack-plugin-after-emit'. Hoo  k was not found.
    BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compa  tibility layer for this hook, hook into 'this._pluginCompat'.
  </code></pre>
  
  <pre><code>  - Tapable.js:69 Compilation.plugin
      [treetopmall]/[tapable]/lib/Tapable.js:69:9
  
    - util.js:89 Compilation.deprecated [as plugin]
      internal/util.js:89:15
  
    - dev-server.js:40 
      C:/Users/duncan/projects/treetopmall/build/dev-server.js:40:15
  
  
    - Hook.js:154 SyncHook.lazyCompileHook
      [treetopmall]/[tapable]/lib/Hook.js:154:20
  
    - Compiler.js:631 Compiler.newCompilation
      [treetopmall]/[webpack]/lib/Compiler.js:631:26
  
    - Compiler.js:667 
      [treetopmall]/[webpack]/lib/Compiler.js:667:29
  
  
    - Hook.js:154 AsyncSeriesHook.lazyCompileHook
      [treetopmall]/[tapable]/lib/Hook.js:154:20
  
    - Compiler.js:662 Compiler.compile
      [treetopmall]/[webpack]/lib/Compiler.js:662:28
  
    - Compiler.js:328 Compiler.runAsChild
      [treetopmall]/[webpack]/lib/Compiler.js:328:8
  
    - child-compiler.js:110 
      [treetopmall]/[html-webpack-plugin]/lib/child-compiler.js:110:21
  
    - new Promise
  
    - child-compiler.js:109 HtmlWebpackChildCompiler.compileTemplates
      [treetopmall]/[html-webpack-plugin]/lib/child-compiler.js:109:31
  
    - cached-child-compiler.js:344 PersistentChildCompilerSingletonPlugin.compileE    ntries
      [treetopmall]/[html-webpack-plugin]/lib/cached-child-compiler.js:344:21
  
    - cached-child-compiler.js:211 
      [treetopmall]/[html-webpack-plugin]/lib/cached-child-compiler.js:211:47
  </code></pre>
  
  <p>My package.json file:</p>
  
  <pre><code>  "scripts": {
      "dev": "node build/dev-server.js",
      "start": "node build/dev-server.js",
      "build": "node build/build.js",
      "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
      "e2e": "node test/e2e/runner.js",
      "test": "npm run unit &amp;&amp; npm run e2e"
    },
    "dependencies": {
      "@babel/plugin-proposal-class-properties": "^7.8.3",
      "@babel/plugin-proposal-decorators": "^7.8.3",
      "@babel/plugin-proposal-export-namespace-from": "^7.8.3",
      "@babel/plugin-proposal-function-sent": "^7.8.3",
      "@babel/plugin-proposal-json-strings": "^7.8.3",
      "@babel/plugin-proposal-numeric-separator": "^7.8.3",
      "@babel/plugin-proposal-throw-expressions": "^7.8.3",
      "@babel/plugin-syntax-dynamic-import": "^7.8.3",
      "@babel/plugin-syntax-import-meta": "^7.8.3",
      "apexcharts": "^3.19.2",
      "axios": "^0.19.2",
      "body-parser": "^1.19.0",
      "bootstrap-vue": "^2.14.0",
      "install": "^0.13.0",
      "moment": "^2.26.0",
      "mysql": "^2.18.1",
      "numeral": "^2.0.6",
      "vue": "^2.6.11",
      "vue-apexcharts": "^1.5.3",
      "vue-awesome": "^4.0.2",
      "vue-chat-scroll": "^1.4.0",
      "vue-router": "^3.2.0",
      "vue-star-rating": "^1.6.1"
    },
    "devDependencies": {
      "@babel/core": "^7.9.6",
      "@babel/plugin-transform-runtime": "^7.9.6",
      "@babel/preset-env": "^7.9.6",
      "autoprefixer": "^9.8.0",
      "babel-loader": "^8.1.0",
      "babel-plugin-istanbul": "^6.0.0",
      "babel-register": "^6.26.0",
      "chai": "^4.2.0",
      "chalk": "^4.0.0",
      "chromedriver": "^83.0.0",
      "connect-history-api-fallback": "^1.6.0",
      "copy-webpack-plugin": "^6.0.1",
      "cross-env": "^7.0.2",
      "cross-spawn": "^7.0.2",
      "css-loader": "^3.5.3",
      "cssnano": "^4.1.10",
      "eventsource-polyfill": "^0.9.6",
      "express": "^4.17.1",
      "extract-text-webpack-plugin": "^3.0.2",
      "file-loader": "^6.0.0",
      "friendly-errors-webpack-plugin": "^1.7.0",
      "html-webpack-plugin": "^4.3.0",
      "http-proxy-middleware": "^1.0.4",
      "inject-loader": "^4.0.1",
      "karma": "^5.0.9",
      "karma-coverage": "^2.0.2",
      "karma-mocha": "^2.0.1",
      "karma-phantomjs-launcher": "^1.0.4",
      "karma-phantomjs-shim": "^1.5.0",
      "karma-sinon-chai": "^2.0.2",
      "karma-sourcemap-loader": "^0.3.7",
      "karma-spec-reporter": "0.0.32",
      "karma-webpack": "^4.0.2",
      "mocha": "^7.1.2",
      "nightwatch": "^1.3.5",
      "node-sass": "^4.14.1",
      "opn": "^6.0.0",
      "optimize-css-assets-webpack-plugin": "^5.0.3",
      "ora": "^4.0.4",
      "phantomjs-prebuilt": "^2.1.16",
      "rimraf": "^3.0.2",
      "sass-loader": "^8.0.2",
      "selenium-server": "^3.141.59",
      "semver": "^7.3.2",
      "shelljs": "^0.8.4",
      "sinon": "^9.0.2",
      "sinon-chai": "^3.5.0",
      "sw-precache-webpack-plugin": "^1.0.0",
      "uglify-es": "^3.3.10",
      "url-loader": "^4.1.0",
      "vue-loader": "^15.9.2",
      "vue-style-loader": "^4.1.2",
      "vue-template-compiler": "^2.6.11",
      "webpack": "^4.43.0",
      "webpack-bundle-analyzer": "^3.8.0",
      "webpack-dev-middleware": "^3.7.2",
      "webpack-dev-server": "^3.11.0",
      "webpack-hot-middleware": "^2.25.0",
      "webpack-merge": "^4.2.2"
    },
    "engines": {
      "node": "&gt;= 4.0.0",
      "npm": "&gt;= 3.0.0"
    },
    "browserslist": [
      "&gt; 1%",
      "last 2 versions",
      "not ie &lt;= 8"
    ]
  </code></pre>
  
  <p>So as you can see, running <code>npm run dev</code> executes the <code>dev-server.js</code> script, so according to the error message, I think the error originates from a plugin from the script:</p>
  
  <pre><code>// force page reload when html-webpack-plugin template changes
  compiler.plugin('compilation', function (compilation) {
    compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
      hotMiddleware.publish({ action: 'reload' })
      cb()
    })
  })
  </code></pre>
  
  <p>I wonder if .plugin syntax has deprecated and some other syntax should be used instead? I tried <code>compiler.hooks.done.tap({' and still not does work, it returns a 'webpack is not defined</code> error instead. </p>
  
  <p>Any help would be greatly appreciated. Thanks! </p>