bridge [h3] [unhandled] next is not a function

Environment

Operating System: Darwin
Node Version: v16.15.0
Nuxt Version: 2.15.8
Nitro Version: 0.6.0
Package Manager: [email protected]
Builder: webpack
User Config: telemetry, env, server, nitro, loading, target, head, css, plugins, components, buildModules, modules, auth, oneSignal, fontawesome, i18n, axios, vWave, performance, build, buildDir, dir, webpack, serverHandlers, devServerHandlers, typescript, bridge
Runtime Modules: @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], v-wave/nuxt
Build Modules: (), @nuxtjs/[email protected], [email protected], @nuxtjs/[email protected], @nuxt/[email protected]

Reproduction

https://codesandbox.io/s/nuxt-bridge-bug-report-h3-rf0rw5

Describe the bug

Some modules like nuxt/sitemap ou nuxt/pwa generate this error: [h3] [unhandled] next is not a function with nitro 6.0.0.

This is probably due to last update of nitro to unjs/h3.

Note: this warning is show on the compilation of the app: WARN [h3] Implicit event handler conversion is deprecated. Use eventHandler() or fromNodeMiddleware() to define event handlers.

Excuse if I miss something, it's my first issue that a report. I try to do it wright, and I hope you can fix it this issue 🙏. Thx for the amazing work.

Additional context

No response

Logs

ERROR  [h3] [unhandled] next is not a function                                                                                                               11:54:48

  at Object.serveStatic [as handler] (node_modules/serve-static/index.js:75:16)
  at Object.handler (node_modules/h3/dist/index.mjs:567:31)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async toNodeHandle (node_modules/nuxi/dist/chunks/index2.mjs:879:7)

Oct 25 '22 10:10 NtchPlayer

Thank you! This needs to be resolved in the module that is injecting middleware of the wrong format. Would you raise an issue in those repos so we can track? :pray:

Oct 25 '22 11:10 danielroe

Hi again @danielroe !

Like it's write above, I open 2 issues for this error on each repos

pwa-module: https://github.com/nuxt-community/pwa-module/issues/532 sitemap-module: https://github.com/nuxt-community/sitemap-module/issues/271

I make a sandbox for each modules 👍

For sitemap-module, I found this repos sitemap-module-nuxt-3 made by d3xter-dev which is a fork of sitemap-module for Nuxt 3. With the RC-12, they meet the same problem with h3 and they fix-it. You see their issue here: https://github.com/funkenstudio/sitemap-module-nuxt-3/issues/8.

I hope that can help you !

Oct 25 '22 12:10 NtchPlayer

Thank you ❤️

Oct 25 '22 12:10 danielroe

Any updates with an alternative solution for this issue? I'm facing the same thing.

Feb 01 '23 13:02 wesbragagt

@danielroe Any updates to this? Just updated my companies dependencies and I am now getting this error. [h3] Implicit event handler conversion is deprecated. Use eventHandler() or fromNodeMiddleware() to define event handlers. Route: /_nuxt/ Handler: function serveStatic

Feb 01 '23 17:02 wesley3295

@danielroe hello, any updates here please?

Aug 09 '23 18:08 janvacek

Have same warning with last bridge version

[h3] Implicit event handler conversion is deprecated. Use eventHandler() or fromNodeMiddleware() to define event handlers.
Route: /_loading
Handler: (req, res) => { loading.app(req, res) }

Aug 31 '23 15:08 BulatSa

Having the same issue after enabling Nitro in a during my installation process of Nuxt Bridge on a Nuxt 2.17.2 project

[10:31:42 AM] WARN [h3] Implicit event handler conversion is deprecated. Use eventHandler() or fromNodeMiddleware() to define event handlers.

     Route: /_nuxt/ 
     Handler: function serveStatic (req, res, next) {
    if (req.method !== 'GET' && req.method !== 'HEAD') {
      if (fallthrough) {
        return next()
      }

      // method not allowed
      res.statusCode = 405
      res.setHeader('Allow', 'GET, HEAD')
      res.setHeader('Content-Length', '0')
      res.end()
      return
    }

    var forwardError = !fallthrough
    var originalUrl = parseUrl.original(req)
    var path = parseUrl(req).pathname

    // make sure redirect occurs at mount
    if (path === '/' && originalUrl.pathname.substr(-1) !== '/') {
      path = ''
    }

    // create send stream
    var stream = send(req, path, opts)

    // add directory handler
    stream.on('directory', onDirectory)

    // add headers listener
    if (setHeaders) {
      stream.on('headers', setHeaders)
    }

    // add file listener for fallthrough
    if (fallthrough) {
      stream.on('file', function onFile () {
        // once file is determined, always forward error
        forwardError = true
      })
    }

    // forward errors
    stream.on('error', function error (err) {
      if (forwardError || !(err.statusCode < 500)) {
        next(err)
        return
      }

      next()
    })

    // pipe
    stream.pipe(res)
  }

Dec 20 '23 09:12 wJoenn

@bradley-varol Curious to know what's been troubling you in this upgrade 🤔

Mar 25 '24 07:03 wJoenn

@wJoenn everything. We are upgrading a big project too and its a nightmare - migration from BootstrapVue, rewriting AuthModule, every plugin, middleware, router, synchronizing with master branch while the master branch is still updating daily. Migrating from nuxtjs/composiiton-api to last Nuxt3. NIGHTMARE

Mar 25 '24 07:03 janvacek

@janvacek don't think this is the right place to talk about it in details but it sounds like you're approaching this upgrade not in the best manner if you'll allow me to say.

Especially this sentence

synchronizing with master branch while the master branch is still updating daily

What Bridge enables is to upgrade your app progressively. Making a single PR with all the changes is definitely not the way to go. It takes time, it's impossible to review, and as you mentioned it's a pain to maintained.

Instead you could be making very small PRs for everything single steps For example

Bump Node to 16
Bump Nuxt to 2.17.3
Bump Node to 18
Install Nuxt bridge without enabling anything
Enable Bridge Typescript
Enable auto import
...

This means your PRs can be merged very fast and you don't need to keep track of any changes in your master branch

There will be issues later because many packages made a complete rewrite back when migrating from Vue 2 to 3 and most of them don't provide cross compatible versions but when that is the case this is not Vue's or Nuxt's responsability (beside it happens with any other framework that some package devs make breaking changes that way) and even then there are still solutions.

Feel free to DM me on Nuxt's Discord (@wJoenn) if you wanna talk about Nuxt upgrade strategies 🙂

In any case, Bridge is a wonderful tool to upgrade any Nuxt app that's behind on the schedule and I think it's not fair to say it's a nightmare considering the work Daniel, Wattanx and the other contributors they've put into this package for the sole purpose of easing migrations

Apr 04 '24 21:04 wJoenn