bridge: Updating to latest nuxt-bridge version breaks Webpack HMR

Instead of patching node_modules you can also do the conversion within the ready hook in your nuxt.config.ts:

import { fromNodeMiddleware, type NodeMiddleware } from 'h3';

export default defineNuxtConfig({
  hooks: {
    ready(nuxt) {
      // https://github.com/nuxt/bridge/issues/607
      // translate nuxt 2 hook from @nuxt/webpack-edge to nuxt bridge hook
      nuxt.hook('server:devMiddleware' as any, async (devMiddleware: NodeMiddleware) => {
        await nuxt.callHook('server:devHandler', fromNodeMiddleware(devMiddleware));
      });
    },
  },
});

To use Webpack HMR with latest nuxt-bridge, you can patch @nuxt/webpack-edge package by using npm’s patch-package package or pnpm. New versions of Nitro require node middleware to be converted to h3 handler and the hook for running middleware also changed. The following patch works for me:

diff --git a/node_modules/@nuxt/webpack-edge/dist/webpack.js b/node_modules/@nuxt/webpack-edge/dist/webpack.js
index ebe49a8..290907d 100644
--- a/node_modules/@nuxt/webpack-edge/dist/webpack.js
+++ b/node_modules/@nuxt/webpack-edge/dist/webpack.js
@@ -41,6 +41,7 @@ const createResolver = require('postcss-import-resolver');
 const Watchpack = require('watchpack');
 const objectToMap = require('webpack/lib/util/objectToMap');
 const nodeExternals = require('webpack-node-externals');
+const h3 = require('h3')
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1929,6 +1930,7 @@ class WebpackBundler {
       });
       await nuxt.callHook("build:resources", this.mfs);
     });
+
     if (options.dev) {
       if (["client", "modern"].includes(name)) {
         return new Promise((resolve, reject) => {
@@ -1992,7 +1994,7 @@ class WebpackBundler {
         }
       )
     );
-    await this.buildContext.nuxt.callHook("server:devMiddleware", this.middleware);
+    await this.buildContext.nuxt.callHook("server:devHandler", h3.fromNodeMiddleware(this.middleware));
   }
   async middleware(req, res, next) {
     const name = utilsEdge.isModernRequest(req, this.buildContext.options.modern) ? "modern" : "client";

The issue still exists on @nuxt/bridge-edge@3.0.0-27830071.32c4527

I’ve downgraded to 3.0.0-27747000.69db93e and now other bridge methods stopped working for me… I think we need a proper fix for this issue

@sreuss Thanks a lot! Finally, it works

For those who are not using typescript:

import { fromNodeMiddleware } from 'h3';

export default defineNuxtConfig({
  hooks: {
    ready (nuxt) {
      // https://github.com/nuxt/bridge/issues/607
      // translate nuxt 2 hook from @nuxt/webpack-edge to nuxt bridge hook
      nuxt.hook('server:devMiddleware', async (devMiddleware) => {
        await nuxt.callHook('server:devHandler', fromNodeMiddleware(devMiddleware));
      });
    },
  },
});

@Draccano Yes.nuxt-bridge use nuxi for all command line operations. For me, I fixed the nuxt-bridge version in package.json as follows and ran npm install again, then Webpack HRM worked normally

@nuxt/bridge": "npm:@nuxt/bridge-edge@3.0.0-27747000.69db93e"

same in 3.0.0-27851925.695ddd7

To use Webpack HMR with latest nuxt-bridge, you can patch @nuxt/webpack-edge package by using npm’s patch-package package or pnpm. New versions of Nitro require node middleware to be converted to h3 handler and the hook for running middleware also changed. The following patch works for me:

diff --git a/node_modules/@nuxt/webpack-edge/dist/webpack.js b/node_modules/@nuxt/webpack-edge/dist/webpack.js
index ebe49a8..290907d 100644
--- a/node_modules/@nuxt/webpack-edge/dist/webpack.js
+++ b/node_modules/@nuxt/webpack-edge/dist/webpack.js
@@ -41,6 +41,7 @@ const createResolver = require('postcss-import-resolver');
 const Watchpack = require('watchpack');
 const objectToMap = require('webpack/lib/util/objectToMap');
 const nodeExternals = require('webpack-node-externals');
+const h3 = require('h3')
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1929,6 +1930,7 @@ class WebpackBundler {
       });
       await nuxt.callHook("build:resources", this.mfs);
     });
+
     if (options.dev) {
       if (["client", "modern"].includes(name)) {
         return new Promise((resolve, reject) => {
@@ -1992,7 +1994,7 @@ class WebpackBundler {
         }
       )
     );
-    await this.buildContext.nuxt.callHook("server:devMiddleware", this.middleware);
+    await this.buildContext.nuxt.callHook("server:devHandler", h3.fromNodeMiddleware(this.middleware));
   }
   async middleware(req, res, next) {
     const name = utilsEdge.isModernRequest(req, this.buildContext.options.modern) ? "modern" : "client";

This also fixed HMR for me. I am using yarn and this worked for me:

yarn patch @nuxt/webpack-edge

Then just do what the command line prompts. Open the file, change it and then commit the patch. It should look something like this:

yarn patch-commit -s /private/var/folders/jg/5g_62ljn0dz2y1x3bnd9q31r0000gn/T/xfs-5730634f/user