Error reading a cookie set with document.cookie in loaders

[discoverlance-com]

I am using shadcn ui with the sidebar component and it has this behaviour where you can persist the sidebar state in the cookie, this is how it typically sets the cookie with document.cookie:

const SIDEBAR_COOKIE_NAME = 'sidebar:state'
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
...
document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`

But in my loader, when I get the cookies with request.headers.get('cookie') and I parse it, the response does not contain the sidebar:state cookie. Is that something that I cannot change by design because of how loaders work or is there a way I can make this work?

import * as cookie from 'cookie'

export const loader = async ({ request }: Route.LoaderArgs) => {
	const user = await requireUser(request)

	console.log({
		parsedCookie: cookie.parse(request.headers.get('cookie') ?? ''),
	})

}

// parsed cookie does not contain the sidebar state cookie
{
  parsedCookie: C <[Object: null prototype] {}> {
    'CH-time-zone': 'Atlantic/St_Helena',
    'CH-reduced-motion': 'no-preference',
    'CH-prefers-color-scheme': 'dark',
  }
}

// when I run document.cookie on the client, this is the result:
// console.log(document.cookie) or just run document.cookie in the browser console
CH-time-zone=Atlantic%2FSt_Helena; CH-reduced-motion=no-preference; CH-prefers-color-scheme=dark; sidebar:state=false

[jezikk]

Why dont use cookie helpers from framework https://reactrouter.com/explanation/sessions-and-cookies ?

[discoverlance-com]

I could use that, but that would mean I need to update the cookie on the server, maybe through a fetch request to an api endpoint?

This cookie needs to be updated quickly and often as its just a state for whether the sidebar is open or close which users could click the menu button quite often so I think it's more performant to just use document.cookie to easily update the cookie on the client than to actually make an api request.

[vniehues]

@discoverlance-com did you find an elegant solution to this?
I'm currently working on the exact same issue in my app.

[discoverlance-com]

No, not at the moment, so I decided to ignore passing the document cookie value from the server to the sidebar. At least till we find a solution...

It could be ok to try the solution suggested by @jezikk as even though user will open and close sidebar, they will hardly do so often and react router will ensure that even if two or more requests are sent once because the user opened and closed a couple of times around the same time, the last one will win and the others will be cancelled. So not ideal but it could be ok to try that for now. But yes, it's not ideal with api requests and all just to update the sidebar cookie when it's possible to do so with document.cookie

[discoverlance-com]

@vniehues, I am not sure why but I basically, changed the cookie name from sidebar:state to just sidebar in the sidebar component and this worked. It looks like the cookie set on the document having the name with a colon in it was the issue? Could it be a bug in react router reading the cookie from the request headers or parsing of the cookie? I did read that the HTTP Cookie Specification (RFC 6265) does not explicitly ban the use of colons in cookie names but some servers, browsers and frameworks might have compatibility issues.

I tried to actually create a react router cookie with the createCookie function that uses a colon in the cookie name and that did work though so it could be compatibility issues with react router or node reading the cookie from the request. But for whatever reason, when you use the createCookie function from react router, you no longer have that issue.

export const userPrefs = createCookie("user:prefs", {
  maxAge: 604_800, // one week
});

So it looks like some compatibility issues with having :, colon in the cookie name, so either you url encode the cookie name to be something like sidebar%3Astate (this has the colon url encoded) or you just don't use colon in the cookie name and it will work.

But anyways, you can try that and it should now work. Just update the cookie name variable in your sidebar component to const SIDEBAR_COOKIE_NAME = 'sidebar' and that will work.

[vniehues]

@discoverlance-com thanks for the detailed answer!
before I read that I already took the path to use the remix-cookies solution and it ended up being really quick and easy to set up.

I just had to change the sidebar code to call a fetch to the endpoint instead of setting the cookie on the document. It seems to be fast enough even when I spam open/close with the keyboard shortcut.