How can I config UseWebpackDevMiddleware to use SPA layout template with Nop 4.x ?

I got the app running with Vue just fine but cannot get HotModuleReplacement (HMR) to work,  

Startup.cs
public void Configure(IApplicationBuilder application, IHostingEnvironment env)
        {

           if (env.IsDevelopment())
            {
                application.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
                {                    
                    HotModuleReplacement = true,
                });
            }
            application.ConfigureRequestPipeline();
            
        }

always give the error: An error occurred while starting the application.
AggregateException: One or more errors occurred. (Error: Cannot find module 'webpack-dev-middleware'
Require stack:
- E:\Git\TAT41\Presentation\Nop.Web\node_modules\aspnet-webpack\WebpackDevMiddleware.js
- E:\Git\TAT41\Presentation\Nop.Web\node_modules\aspnet-webpack\index.js
- C:\Users\congt\AppData\Local\Temp\gix1lpgo.rzq
- C:\Users\congt\AppData\Local\Temp\emha4rit.ssh
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:982:15)
at Function.Module._load (internal/modules/cjs/loader.js:864:27)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (internal/modules/cjs/helpers.js:77:18)
at attachWebpackDevMiddleware (E:\Git\TAT41\Presentation\Nop.Web\node_modules\aspnet-webpack\WebpackDevMiddleware.js:72:13)
at E:\Git\TAT41\Presentation\Nop.Web\node_modules\aspnet-webpack\WebpackDevMiddleware.js:271:25
at Array.forEach (<anonymous>)
at Server.<anonymous> (E:\Git\TAT41\Presentation\Nop.Web\node_modules\aspnet-webpack\WebpackDevMiddleware.js:234:36)
at Object.onceWrapper (events.js:417:28)
at Server.emit (events.js:311:20)
)
System.Threading.Tasks.Task<TResult>.GetResultCore(bool waitCompletionNotification)

NodeInvocationException: Error: Cannot find module 'webpack-dev-middleware'

all packages are installed already and run fine without HMR


My package.json
.....
"devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
    "@babel/plugin-proposal-function-sent": "^7.0.0",
    "@babel/plugin-proposal-json-strings": "^7.0.0",
    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-syntax-import-meta": "^7.0.0",
    "@babel/plugin-transform-async-to-generator": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/register": "^7.0.0",
    "@babel/runtime": "^7.3.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.13",
    "@fortawesome/free-brands-svg-icons": "^5.7.0",
    "@fortawesome/free-solid-svg-icons": "^5.7.0",
    "@fortawesome/vue-fontawesome": "^0.1.5",
    "aspnet-webpack": "^3.0.0",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.5",
    "bootstrap": "^4.0.0",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.0",
    "eslint": "^5.12.1",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-html": "^5.0.0",
    "eslint-plugin-import": "^2.9.0",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-standard": "^4.0.0",
    "event-source-polyfill": "^1.0.5",
    "file-loader": "^3.0.1",
    "font-awesome": "^4.7.0",
    "jquery": "^3.4.1",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.13.1",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "popper.js": "^1.14.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue-loader": "^15.6.2",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-dev-server": "^3.1.14",
    "webpack-hot-middleware": "^2.21.2"
  }


UPDATE: I got it to work. thanks. please delete my post