{"id":15657,"library":"js-cookie-next","title":"Modern Cookie Utility for Browsers","description":"js-cookie-next is a native-first, TypeScript-first utility library designed for managing browser cookies with a focus on modern web standards. It transparently supports the Asynchronous Cookie Store API where available and falls back to `document.cookie` for broader compatibility. Currently at version 1.0.1, the library maintains a stable release cadence, with updates primarily driven by new browser features or bug fixes rather than frequent major API changes. Key differentiators include its zero-dependency footprint, small size (< 2 KB gzipped), SSR-safe imports that make sync APIs no-ops in non-browser environments, and built-in support for Partitioned Cookies (CHIPS) via a simple preset option. It prioritizes type safety and a clear API for both synchronous and asynchronous cookie operations, catering to contemporary web development practices.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/rajudandigam/js-cookie-next","tags":["javascript","cookies","cookieStore","partitioned","CHIPS","typescript","browser"],"install":[{"cmd":"npm install js-cookie-next","lang":"bash","label":"npm"},{"cmd":"yarn add js-cookie-next","lang":"bash","label":"yarn"},{"cmd":"pnpm add js-cookie-next","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The library is ESM-first. While bundlers handle CJS compatibility, direct CommonJS require in Node.js environments may not work as expected or is discouraged due to the browser-centric nature of the library. Sync APIs are no-ops in SSR contexts where `document` is undefined.","wrong":"const { get } = require('js-cookie-next')","symbol":"get","correct":"import { get } from 'js-cookie-next'"},{"note":"`set` is a named export, not a default export. Ensure correct destructuring.","wrong":"import set from 'js-cookie-next'","symbol":"set","correct":"import { set } from 'js-cookie-next'"},{"note":"Async functions (`getAsync`, `setAsync`, `removeAsync`) are named exports from the main package, not a separate submodule path. They leverage `window.cookieStore` if available, otherwise fall back to sync behavior.","wrong":"import { get, set } from 'js-cookie-next/async'","symbol":"getAsync","correct":"import { getAsync } from 'js-cookie-next'"},{"note":"Always use `import type` for type definitions to ensure they are stripped during compilation and do not introduce runtime overhead.","wrong":"import { CookieOptions } from 'js-cookie-next'","symbol":"CookieOptions","correct":"import type { CookieOptions } from 'js-cookie-next'"}],"quickstart":{"code":"import { get, set, remove, getAsync, setAsync, removeAsync } from \"js-cookie-next\";\n\n// Basic synchronous usage\nset(\"theme\", \"dark\", { path: \"/\", sameSite: \"lax\" });\nconsole.log('Current theme (sync):', get(\"theme\"));\nremove(\"theme\", { path: \"/\" });\nconsole.log('Theme after removal (sync):', get(\"theme\"));\n\n// Asynchronous usage with fallback\nasync function manageAsyncCookie() {\n  await setAsync(\"session_id\", \"user_xyz\", { expires: 7, secure: true, sameSite: \"none\" });\n  const sessionId = await getAsync(\"session_id\");\n  console.log('Session ID (async):', sessionId);\n\n  // Example of a partitioned cookie (CHIPS)\n  await setAsync(\"widget_data\", \"value123\", { mode: \"partitioned\" });\n  console.log('Widget data set with CHIPS (async).');\n\n  await removeAsync(\"session_id\");\n  console.log('Session ID after removal (async):', await getAsync(\"session_id\"));\n}\n\nmanageAsyncCookie();","lang":"typescript","description":"This quickstart demonstrates both the synchronous and asynchronous APIs, including setting and getting cookies, removing them, and utilizing advanced options like `partitioned` mode for CHIPS."},"warnings":[{"fix":"Always include `secure: true` when `sameSite: \"none\"`, e.g., `{ sameSite: \"none\", secure: true }`.","message":"When setting a cookie with `sameSite: \"none\"`, modern browsers require the `secure: true` option to be explicitly set. Failing to do so will result in the cookie being rejected.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure `remove('key', { path: '/original/path', domain: 'original.domain' })` matches the original set options.","message":"To successfully remove a cookie, the `path` and `domain` options used in the `remove` call must exactly match those specified when the cookie was originally set.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For SSR, if cookie management is needed, ensure it's handled by your SSR framework or use server-specific cookie parsing/setting mechanisms. `js-cookie-next` is primarily for client-side use or isomorphic applications that gracefully degrade on the server.","message":"The synchronous APIs (`get`, `set`, `remove`) are designed for browser environments. When imported in a Server-Side Rendering (SSR) context where `document` is undefined, these functions will act as no-ops to prevent runtime errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always test `mode: \"partitioned\"` in target browsers. Be aware that `sameSite: \"none\"` still implicitly requires `secure: true` even when using this preset.","message":"The `mode: \"partitioned\"` option is a convenience preset that expands to `partitioned: true`, `secure: true`, and `sameSite: \"none\"`. Browser support for Partitioned Cookies (CHIPS) is still evolving, and the cookie may not be partitioned in unsupported browsers.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"The library's sync APIs are designed to be no-ops in SSR. If you encounter this error in a non-browser environment, it indicates a misconfiguration or an attempt to use client-side logic on the server. Consider conditional rendering or ensure code runs only in the browser.","cause":"Attempting to use synchronous cookie APIs (`get`, `set`, `remove`) in a Node.js or SSR environment where the `document` object is not available.","error":"TypeError: Cannot read properties of undefined (reading 'cookie')"},{"fix":"When removing a cookie, ensure that all relevant options (like `path` and `domain`) are identical to those used during the `set()` operation. For example, if set with `set('mycookie', 'value', { path: '/app' })`, remove with `remove('mycookie', { path: '/app' })`.","cause":"The `remove()` function was called without matching the `path` and `domain` options that were used when the cookie was originally set.","error":"Cookie 'mycookie' not found after removal."},{"fix":"If `sameSite` is `\"none\"`, you *must* also set `secure: true`. Ensure your site is served over HTTPS when setting `secure` cookies. Also, check for `domain` mismatches if you're attempting cross-subdomain cookies.","cause":"Often caused by incorrect `sameSite` and `secure` combinations, particularly `sameSite: \"none\"` without `secure: true`, or attempting to set a secure cookie over an insecure HTTP connection.","error":"Cookie 'mycookie' not appearing in browser despite `set()` call."}],"ecosystem":"npm"}