bug: middleware is loaded before plugins #19766

[productdevbook]

🐛 The bug

pnpm dev

console.log see first middleware after plugin.

but it should be the other way around. Plugins should come first and then middleware should come.

🛠️ To reproduce

https://github.com/productdevbook/nuxt3bug1

🌈 Expected behaviour

first load plugins after middleware

ℹ️ Additional context

---

• Operating System: Linux
• Node Version: v18.15.0
• Nuxt Version: 3.3.1
• Nitro Version: 2.3.1
• Package Manager: pnpm@7.29.3
• Builder: vite
• User Config: modules
• Runtime Modules: @nuxtjs/ionic@0.8.1
• Build Modules: -

---

[Tragio]

Not sure if is related @danielroe

import Cookies from 'js-cookie'

export default defineNuxtRouteMiddleware(() => {
  if (!Cookies.get('token')) {
    return navigateTo('/login')
  }
})

Will throw:
[Vue Router warn]: Detected an infinite redirection in a navigation guard when going from "/" to "/login". Aborting to avoid a Stack Overflow. This will break in production if not fixed.

[danielroe]

@Tragio That will always redirect infinitely, because the middleware will be called on the new route too. You should check that the route path isn't already /login before redirecting.

[Tragio]

@Tragio That will always redirect infinitely, because the middleware will be called on the new route too. You should check that the route path isn't already /login before redirecting.

I did that before, but I think I was using something from Nuxt 2 🤦 thank you very much, you're amazing 💪

[rvmourik]

I am encountering the same issue, it looks like middleware isn't properly handled. I started using a global middleware and using a provided helper from the plugin in this middleware. But is always null, if i change the middleware to a named variant and add it to a page, the helper variable is not null anymore.

Another approach I tried (inspired by https://github.com/wobsoriano/nuxt-firebase-auth-starter/blob/master/nuxt.config.ts) is adding two plugins, and from with one of the plugins registering a global middleware. But the global middleware isn't run whatsoever, putting a console log in the callback method does not get shown.

export default defineNuxtPlugin(() => {
    const user = useUser()

    addRouteMiddleware(
        'auth',
        (to) => {
            console.log(to)

            if (to.path === '/login' && user.value)
                return navigateTo('/vehicles')

            if (to.path !== '/login' && !user.value)
                return navigateTo('/login')
        },
        { global: true },
    )
})