fix: hmr in modern mode (#4623)

packages/server/src/middleware/modern.js

@@ -34,19 +34,27 @@ const detectModernBuild = ({ options, resources }) => {
   }
 }
 
-const detectModernBrowser = (req, options) => {
+const detectModernBrowser = ({ socket = {}, headers }) => {
+  if (socket.isModernBrowser === undefined) {
+    const ua = headers && headers['user-agent']
+    socket.isModernBrowser = isModernBrowser(ua)
+  }
+}
+
+const setModernMode = (req, options) => {
+  const { socket = {} } = req
+  const isModernBrowser = socket.isModernBrowser
   if (options.modern === 'server') {
-    const { socket = {}, headers } = req
+    req.modernMode = isModernBrowser
-    if (socket.modernMode === undefined) {
+  }
-      const ua = headers && headers['user-agent']
+  if (options.dev) {
-      socket.modernMode = isModernBrowser(ua)
+    req.devModernMode = isModernBrowser
-    }
-    req.modernMode = socket.modernMode
   }
 }
 
 export default ({ context }) => (req, res, next) => {
   detectModernBuild(context)
-  detectModernBrowser(req, context.options)
+  detectModernBrowser(req)
+  setModernMode(req, context.options)
   next()
 }

packages/server/src/server.js

@@ -83,7 +83,7 @@ export default class Server {
     if (this.options.dev) {
       this.useMiddleware(modernMiddleware)
       this.useMiddleware(async (req, res, next) => {
-        const name = req.modernMode ? 'modern' : 'client'
+        const name = req.devModernMode ? 'modern' : 'client'
         if (this.devMiddleware && this.devMiddleware[name]) {
           await this.devMiddleware[name](req, res)
         }

packages/vue-renderer/src/renderer.js

@@ -150,6 +150,7 @@ export default class VueRenderer {
         if (isMFS) {
           // Cleanup MFS as soon as possible to save memory
           _fs.unlinkSync(fullPath)
+          delete this._assetsMapping
         }
         return contents
       } catch (err) {

packages/webpack/src/builder.js

@@ -180,7 +180,7 @@ export class WebpackBundler {
   webpackDev(compiler) {
     consola.debug('Adding webpack middleware...')
 
-    const name = [compiler.options.name]
+    const name = compiler.options.name
     const { nuxt: { server }, options } = this.context
 
     // Create webpack dev middleware