[h3] [unhandled] next is not a function

NtchPlayer commented 1 year ago

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 commented 1 year ago

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:

NtchPlayer commented 1 year ago

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 !

danielroe commented 1 year ago

Thank you ❤️

wesbragagt commented 1 year ago

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

wesley3295 commented 1 year ago

@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 commented 1 year ago

@danielroe hello, any updates here please?

BulatSa commented 1 year ago

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 commented 8 months ago

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 commented 5 months ago

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 commented 5 months ago

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

janvacek commented 5 months ago

@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 commented 5 months ago

@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

nuxt / bridge