useCookie returns undefined on SSR

[evgenii-code]

Environment

• Operating System: Windows_NT
• Node Version: v18.18.2
• Nuxt Version: 2.17.2
• CLI Version: 3.10.0
• Nitro Version: 2.8.0
• Package Manager: [email protected]
• Builder: webpack
• User Config: bridge, head, css, plugins, components, modules, build, serverHandlers, devServerHandlers, devServer, typescript, nitro, buildModules
• Runtime Modules: -
• Build Modules: (), @nuxt/[email protected]

Reproduction

Minimal repo
https://github.com/evgenii-code/nuxt-bridge-use-cookie-ssr

1. Clone repository
2. npm i
3. npm run dev
4. Set value to cookie
5. Refresh the page to trigger SSR

Describe the bug

Composable useCookie returns undefined on SSR,
But on a client useCookie works as intended.

Code of a simple component, that uses cookie on SSR

<template>
  <div>
    <h1>Bug with useCookie on SSR</h1>

    <button @click="setCookie">Set cookie to 'foo'</button>

    <p>Cookie value: {{ `${foo}` }}</p>
  </div>
</template>

<script lang="ts" setup>
const foo = useCookie<string | undefined>('foo')

const setCookie = () => (foo.value = 'foo')
</script>

Video of a bug

Additional context

No response

Logs

No response

[wattanx]

This is the same behavior in nuxt 3.
You may want to track the following PR.
nuxt/nuxt#21940

[evgenii-code]

This is the same behavior in nuxt 3. You may want to track the following PR. nuxt/nuxt#21940

@wattanx
Are you sure this is a relevant issue?
Because I've recreated the same component in Nuxt 3 and cookie value on SSR is a valid value, not undefined.
In Nuxt 3 it doesn't cause hydration error, but in Nuxt Bridge it does.

Video of Nuxt 3 useCookie SSR

Nuxt 3:

Nuxt Bridge:

[wattanx]

Can you show us what kind of source code examples you have?
I have looked at the following source code and determined that it is the same.
https://stackblitz.com/edit/github-zil2p9

[evgenii-code]

It's just a simple page that reads cookie

<template>
  <div>
    <h1>Bug with useCookie on SSR</h1>

    <button @click="setCookie">Set cookie to 'foo'</button>

    <p>Cookie value: {{ `${foo}` }}</p>
  </div>
</template>

<script lang="ts" setup>
const foo = useCookie<string | undefined>('foo')

// `undefined` on a server side and 'foo' on a client, 
// but it should be 'foo' on a server side too
console.log('ssr foo.value', foo.value);

const setCookie = () => (foo.value = 'foo')
</script>

https://stackblitz.com/edit/github-zil2p9-fvxznq?file=app.vue

You have to open in a new tab

I have a repository with same setup in Nuxt Bridge too
https://github.com/evgenii-code/nuxt-bridge-use-cookie-ssr

[evgenii-code]

@wattanx
Here, I copied this repository to the stackblitz

https://stackblitz.com/~/github.com/evgenii-code/nuxt-bridge-use-cookie-ssr

1. Open preview in a new tab
2. Set a cookie value
3. Refresh the page
4. For a moment there will be undefined and then it changes to foo. This causes hydration error

https://nuxtbridgeusecookiessr-31vc--3000--6843a59c.local-credentialless.webcontainer.io/

[wattanx]

Oh sorry. I guess I needed to see it in a open in a new tab
It seems like it was resolved in RC.4, but is my understanding correct?
https://stackblitz.com/edit/github-gmtfgt

[evgenii-code]

Yeah, it looks like in the RC.4, the bug is gone.

But I cant figure out how to update my repository to RC.4
It gives me and error in node_modules/h3/dist/index.mjs

TypeError - Cannot read properties of undefined (reading 'node')

I have tried to delete node_modules and package-lock.json

I think it is because we have nitro: false in our nuxt.config.ts, we aren't ready to switch it on yet.

bridge: {
  typescript: true,
  capi: true,
  nitro: false, // Here
},

[wattanx]

As you say, I think it is because nitro: false.

[wattanx]

Fixed at #998