Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useCookie example is misleading

See original GitHub issue

Environment

Operating System: Linux
Node Version: v16.14.1
Nuxt Version: 3.0.0-rc.1
Package Manager: npm@8.5.0
Builder: vite
User Config: vite
Runtime Modules: -
Build Modules: -

Reproduction

https://github.com/cram0/nuxt

clone this repo ^

npm install
npm run dev

browse to localhost:3000

On Chrome :

Press F12
Go to the Application tab
In “Storage”, click on “Cookies” then “Localhost:3000”

There should be a cookie with name “foo” and value “bar”, but that’s not the case because of the bug explained below.

Describe the bug

I want my client to get access to a specific cookie based on an example function given in the documentation here : https://v3.nuxtjs.org/guide/features/data-fetching#example-pass-on-cookies-from-server-side-api-calls-on-ssr-response

The only modification is that I added an object which sets the method type to GET and useRequestHeaders() which is needed in my case (even if you remove it, it doesn’t change much).

But I get an error 500 : nuxt instance unavailable (i.e. Logs)

Additional context

No response

Logs

[Vue warn]: Unhandled error during execution of setup function 
  at <App>
[nuxt] [request error] nuxt instance unavailable
  at Module.useNuxtApp (./.nuxt/dist/server/server.mjs:396:13)  
  at Module.useRequestEvent (./.nuxt/dist/server/server.mjs:1234:58)  
  at readRawCookies (./.nuxt/dist/server/server.mjs:1122:62)  
  at Module.useCookie (./.nuxt/dist/server/server.mjs:1101:19)  
  at Module.fetchWithCookie (./.nuxt/dist/server/server.mjs:3428:26)  
  at processTicksAndRejections (node:internal/process/task_queues:96:5)  
  at async setup (./.nuxt/dist/server/server.mjs:3374:12)

Issue Analytics

State:
Created a year ago
Reactions:6
Comments:9 (3 by maintainers)

Top GitHub Comments

7reactions

antoine-1commented, May 12, 2022

@danielroe This solution is not practical because we have to define the cookie to retrieve in advance, but in some situations we have to wait for the return of the $fetch to parse the set-cookie and get the keys and their values. It would be cool to propose an example with a plugin

5reactions

cram0commented, May 12, 2022

This is exactly how I fixed my problem and yes that part of the documentation is misleading.

It would be nice to have a proper example if anyone else wants to do the same as a plugin/middleware for example.

Top Results From Across the Web

UseCookies in reactjs not working well - JavaScript

I need to check whenever the cookie name is Login or Default to check if the person is logged in so i wrote...

useCookie | @lilib/hooks - GitHub Pages

useCookie. This hook use js-cookie as the parser. ... Default is false . options.pollingInterval : Polling interval time, ... function Example() {

useCookie · Nuxt Composables

useCookie is an SSR-friendly composable to read and write cookies. ... changes for only top level properties; false Will not watch cookie ref...

React Cookies management with simple hooks

import React, { Component } from 'react'; import { useCookies } from '@js-smart/react-cookie-service'; export default function Example() ...

useCookies - VueUse

doNotParse (boolean = false): do not convert the cookie into an object no matter ... and returns useCookies function with provided universal-cookie instance....