FetchError: 400 on /__nuxt_hydration endpoint after updating dependencies

[ljuzig]

After updating my project dependencies, I'm encountering a 400 error on the /__nuxt_hydration endpoint during client-side hydration.

Error

Uncaught (in promise) FetchError: [POST] "https://[REDACTED]/__nuxt_hydration": 400 
    NuxtJS 39
        $fetch2
        useHydrationCheck
        createHook
        callWithErrorHandling
        callWithAsyncErrorHandling
        __weh
        flushPostFlushCbs
        flushJobs
        flushJobs
        promise callback*queueFlush
        queuePostFlushCb
        resolve
        resolve
        registerDep
        promise callback*registerDep
        mountComponent
        hydrateNode
        hydrateSubTree
        componentUpdateFn
        run
        setupRenderEffect
        mountComponent
        hydrateNode
        hydrateSubTree
        componentUpdateFn
        run
        setupRenderEffect
        mountComponent
        hydrateNode
        hydrateSuspense
        hydrateNode
        hydrateSubTree
        componentUpdateFn
        run
        setupRenderEffect
        mountComponent
        hydrateNode
        hydrateSubTree
        componentUpdateFn
4 undefined:6:5
    $fetch2 NuxtJS
    AsyncFunctionThrow self-hosted:804
    NuxtJS 38
    (Async: async)
        useHydrationCheck
        createHook
        callWithErrorHandling
        callWithAsyncErrorHandling
        __weh
        flushPostFlushCbs
        flushJobs
        flushJobs
    (Async: promise callback)
        queueFlush
        queuePostFlushCb
        resolve
        resolve
        registerDep
    (Async: promise callback)
        registerDep
        mountComponent
        hydrateNode
        hydrateSubTree
        componentUpdateFn
        run
        setupRenderEffect
        mountComponent
        hydrateNode
        hydrateSubTree
        componentUpdateFn
        run
        setupRenderEffect
        mountComponent
        hydrateNode
        hydrateSuspense
        hydrateNode
        hydrateSubTree
        componentUpdateFn
        run
        setupRenderEffect
        mountComponent
        hydrateNode
        hydrateSubTree
        componentUpdateFn

Workaround

Removing @nuxt/hints from the modules array in nuxt.config.ts resolves the error.

Updated Dependencies

Package	From	To
nuxt	4.2.0	4.2.2
vue	3.5.22	3.5.26
vue-router	4.6.3	4.6.4
@nuxt/hints	1.0.0-alpha.3	1.0.0-alpha.5

Additional Context

I tested with @nuxt/hints versions alpha.3, alpha.4, and alpha.5, all three produce the same error. However, the project was previously working fine with alpha.3 before updating the other dependencies (nuxt, vue, vue-router), so the issue might be caused by a change in one of those external dependencies rather than @nuxt/hints itself.

Environment

Operating system: Linux 6.6.87
CPU: AMD Ryzen 7 PRO 8700GE w/ Radeon 780M Graphics (16 cores)
Node.js version: v22.16.0
nuxt/cli version: 3.31.2
Package manager: npm 10.9.2
Nuxt version: 4.2.2
Nitro version: 2.12.9
Builder: vite 7.2.7

[splitwarechef]

I was just about to create this same issue.
It seems to be caused by nuxt-security. Did you have that installed OP?

[huang-julien]

Hello 👋 can you provide a reproduction please 🙏

[keiches]

It occurred @nuxt/hints@1.0.0-alpha.4 or @nuxt/hints@1.0.0-alpha.5 with nuxt-security@2.4.0.
nuxt-security s version doesn't matter.
If remove nuxt-security, then, it works well.
If change @nuxt/hints@1.0.0-alpha.5 to @nuxt/hints@1.0.0-alpha.3, then it works well. too

nuxt.config.ts

  ...
  modules: [
    ...
    '@nuxt/hints',
    `nuxt-security',
    ...
  ],

package.json

  ...
  "dependencies": {
    "@nuxt/hints": "1.0.0.alpha.5",
    "nuxt-security": "2.4.0",
    ...
  },
  ...

[splitwarechef]

Here is a sample

https://stackblitz.com/edit/github-mnw44snb?file=nuxt.config.ts

[ljuzig]

I was just about to create this same issue. It seems to be caused by nuxt-security. Did you have that installed OP?

Yes, I do. I even tried commenting out my nuxt-security settings before opening this issue because I thought one of my config options was causing it, but I still got the error. I haven’t tried removing the module entirely actually.

Here is a sample

https://stackblitz.com/edit/github-mnw44snb?file=nuxt.config.ts

Thanks for providing a reproduction. Hopefully @huang-julien can take a look into it now.

[splitwarechef]

Unfortunately, the nuxt-security upgrade did not fix the issue

[huang-julien]

cc @Baroshem

[splitwarechef]

In case anyone runs into this, here is a quick and easy fix (by disabling all the middlewares for the hydration route

import { HYDRATION_ROUTE } from "@nuxt/hints/runtime/hydration/utils.js";

export default defineNuxtConfig({
  ...
  routeRules: {
    [HYDRATION_ROUTE]: {
      security: {
        rateLimiter: false,
        requestSizeLimiter: false,
        xssValidator: false,
        corsHandler: false,
      }
    },
  }
})

hopefully nuxt-security finds a way to totally disable it's features for @nuxt/hints soon.