[h3] [unhandled] next is not a function

[NtchPlayer]

Environment

• Operating System: Darwin
• Node Version: v16.15.0
• Nuxt Version: 2.15.8
• Nitro Version: 0.6.0
• Package Manager: npm@8.19.2
• 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/axios@5.13.6, @nuxtjs/auth-next@5.0.0-1648802546.c9880dc, @nuxtjs/i18n@7.3.0, @nuxtjs/onesignal@3.0.0-beta.16, @nuxtjs/color-mode@3.1.8, v-wave/nuxt
• Build Modules: (), @nuxtjs/eslint-module@3.1.0, nuxt-compress@5.0.0, @nuxtjs/fontawesome@1.1.2, @nuxt/bridge@3.0.0-27778050.a725a7a

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)

[danielroe]

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? 🙏

[NtchPlayer]

Hi again @danielroe !

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

pwa-module: nuxt-community/pwa-module#532
sitemap-module: nuxt-community/sitemap-module#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: d3xter-dev/sitemap-module-nuxt-3#8.

I hope that can help you !

[danielroe]

Thank you ❤️

[wesbragagt]

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

[wesley3295]

@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

[janvacek]

@danielroe hello, any updates here please?

[BulatSa]

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) }

[wJoenn]

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)
  }

[bradley-varol]

Also seeing this. This migration from Nuxt 2 to Nuxt 3 has been a nightmare. Eager to migrate to Nextjs so I never have to go through something like this again.

[wJoenn]

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

[janvacek]

@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

[wJoenn]

@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