useState is non reactive when ssr: false

[mitjans]

Environment

---

• Operating System: Darwin
• Node Version: v20.14.0
• Nuxt Version: 3.12.1
• CLI Version: 3.12.0
• Nitro Version: 2.9.6
• Package Manager: bun@1.1.12
• Builder: -
• User Config: ssr, devtools
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/~/github.com/mitjans/nuxt-repro

Describe the bug

1. Once the repro app builds, you'll see that the increment button works correctly.
2. Head to nuxt.config.ts and change ssr: true to ssr: false
3. Refresh the app
4. Increment button stops working

Additional context

Further looking into this....

[konstantin-karlovich-unbiased-co-uk]

I have the same issue

[mitjans]

Looks like the problem is introduced in c545c1d#diff-07c29c3dc0b35942d77d28aed5d8aea7be262649ba1f076712ad8391acf50c79L255-L260

Changing the payload from shallowReactive back to reactive seems to solve the problem.

[danielroe]

My apologies! Until the next patch, you can work around by creating ~/plugins/payload-reactivity.client.ts with the following content:`

export default defineNuxtPlugin(nuxtApp => {
  const payload = nuxtApp.payload

  for (const key in ['_errors', 'data']) {
    if (!isReactive(payload[key])) {
      payload[key] = shallowReactive(payload[key])
    }
  }

  if (!isReactive(payload.state)) {
    payload.state = reactive(payload.state)
  }
})