fix: replace cookie with cookie-es to fix Vite ESM compatibility

[Ayush2k02]

Summary

Fixes #7522
Fixes #7453

This PR replaces the cookie package with cookie-es in @clerk/backend to fix ESM compatibility issues in Vite environments.

Problem

When using @clerk/tanstack-react-start (or any Clerk package that depends on @clerk/backend) in Vite dev mode, users encounter this error:

The requested module '/node_modules/.pnpm/[email protected]/node_modules/cookie/dist/index.js'
does not provide an export named 'parse'

This happens because:

1. The cookie package uses CommonJS-style exports that don't work well with Vite's ESM transformations
2. Vite's dev mode tries to use named imports (import { parse } from 'cookie') but the package doesn't properly expose them in ESM environments
3. This only affects development - production builds work fine because they're fully bundled

Current Workarounds

Users had to add Vite config workarounds:

// vite.config.ts
export default {
  optimizeDeps: {
    include: ["cookie"]
  }
}

Or use dynamic imports to avoid pulling server modules into client bundles.

Solution

Replace cookie with cookie-es:

• cookie-es is a modern, ESM-first package
• Provides the exact same API as cookie
• Properly exports named exports for ESM environments
• Works seamlessly with Vite and other modern bundlers

Changes Made

1. packages/backend/package.json: Replace "cookie": "1.0.2" with "cookie-es": "^1.3.1"
2. packages/backend/src/tokens/clerkRequest.ts: Update import from 'cookie' to 'cookie-es'

Benefits

✅ No more Vite configuration required - Users don't need to add optimizeDeps config
✅ Same API - cookie-es is a drop-in replacement with identical function signatures
✅ Modern ESM support - Proper ES module exports work correctly in all environments
✅ Fixes the root cause - Rather than working around the bundler, we use a package designed for ESM

Testing

The parse function from cookie-es has the same signature and behavior as the one from cookie:

• Parses cookie strings into objects
• Handles URL encoding/decoding
• Returns the same data structure

Existing tests should continue to pass without modification.

Impact

This change affects the @clerk/backend package, which is consumed by:

• @clerk/tanstack-react-start
• @clerk/nextjs
• @clerk/remix
• Other server-side Clerk packages

All of these will benefit from improved ESM compatibility.

Summary by CodeRabbit

• Chores
  • Updated cookie parsing dependency to a more recent version, maintaining compatibility with existing functionality.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: d165d1a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

@Ayush2k02 is attempting to deploy a commit to the Clerk Production Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

📝 Walkthrough

Walkthrough

This change replaces the cookie package with cookie-es as a dependency in the backend module and updates the corresponding import in the token request handler. The cookie-es package provides ESM-compatible exports for cookie parsing functionality. This substitution addresses compatibility issues that arise in Vite development environments, particularly when used with pnpm workspaces, where the original cookie package fails to properly export the parse function during module resolution.

Pre-merge checks

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: replacing the cookie dependency with cookie-es to fix Vite ESM compatibility issues.
Linked Issues check	✅ Passed	The PR successfully addresses both linked issues: #7522 (named export error in Vite dev) and #7453 (ESM compatibility). It replaces cookie with cookie-es to fix ESM compatibility without requiring user config changes.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to resolving the ESM compatibility issue. Changes in package.json and clerkRequest.ts are focused replacements of the cookie dependency with cookie-es.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

📜 Recent review details

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between e76d248 and d165d1a.

📒 Files selected for processing (2)

• packages/backend/package.json
• packages/backend/src/tokens/clerkRequest.ts

🧰 Additional context used

📓 Path-based instructions (12)

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

All code must pass ESLint checks with the project's configuration

Files:

• packages/backend/src/tokens/clerkRequest.ts

**/*.{js,jsx,ts,tsx,json,md,yml,yaml}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

Use Prettier for consistent code formatting

Files:

• packages/backend/src/tokens/clerkRequest.ts
• packages/backend/package.json

packages/**/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

TypeScript is required for all packages

Files:

• packages/backend/src/tokens/clerkRequest.ts

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

Follow established naming conventions (PascalCase for components, camelCase for variables)

Files:

• packages/backend/src/tokens/clerkRequest.ts

packages/**/src/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

packages/**/src/**/*.{ts,tsx,js,jsx}: Maintain comprehensive JSDoc comments for public APIs
Use tree-shaking friendly exports
Validate all inputs and sanitize outputs
All public APIs must be documented with JSDoc
Use dynamic imports for optional features
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Implement proper logging with different levels

Files:

• packages/backend/src/tokens/clerkRequest.ts

**/*.ts?(x)

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

Use proper TypeScript error types

Files:

• packages/backend/src/tokens/clerkRequest.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/typescript.mdc)

**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoid any type - prefer unknown when type is uncertain, then narrow with type guards
Implement type guards for unknown types using the pattern function isType(value: unknown): value is Type
Use interface for object shapes that might be extended
Use type for unions, primitives, and computed types
Prefer readonly properties for immutable data structures
Use private for internal implementation details in classes
Use protected for inheritance hierarchies
Use public explicitly for clarity in public APIs
Use mixins for shared behavior across unrelated classes in TypeScript
Use generic constraints with bounded type parameters like <T extends { id: string }>
Use utility types like Omit, Partial, and Pick for data transformation instead of manual type construction
Use discriminated unions instead of boolean flags for state management and API responses
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation at the type level
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Document functions with JSDoc comments including @param, @returns, @throws, and @example tags
Create custom error classes that extend Error for specific error types
Use the Result pattern for error handling instead of throwing exceptions
Use optional chaining (?.) and nullish coalescing (??) operators for safe property access
Let TypeScript infer obvious types to reduce verbosity
Use const assertions with as const for literal types
Use satisfies operator for type checking without widening types
Declare readonly arrays and objects for immutable data structures
Use spread operator and array spread for immutable updates instead of mutations
Use lazy loading for large types...

Files:

• packages/backend/src/tokens/clerkRequest.ts

**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)

Use ESLint with custom configurations tailored for different package types

Files:

• packages/backend/src/tokens/clerkRequest.ts

**/*.{js,ts,jsx,tsx,json,md,yml,yaml}

📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)

Use Prettier for code formatting across all packages

Files:

• packages/backend/src/tokens/clerkRequest.ts
• packages/backend/package.json

**/*

⚙️ CodeRabbit configuration file

If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes.

**/*: Only comment on issues that would block merging, ignore minor or stylistic concerns.
Restrict feedback to errors, security risks, or functionality-breaking problems.
Do not post comments on code style, formatting, or non-critical improvements.
Keep reviews short: flag only issues that make the PR unsafe to merge.
Group similar issues into a single comment instead of posting multiple notes.
Skip repetition: if a pattern repeats, mention it once at a summary level only.
Do not add general suggestions, focus strictly on merge-blocking concerns.
If there are no critical problems, respond with minimal approval (e.g., 'Looks good'). Do not add additional review.
Avoid line-by-line commentary unless it highlights a critical bug or security hole.
Highlight only issues that could cause runtime errors, data loss, or severe maintainability issues.
Ignore minor optimization opportunities, focus solely on correctness and safety.
Provide a top-level summary of critical blockers rather than detailed per-line notes.
Comment only when the issue must be resolved before merge, otherwise remain silent.
When in doubt, err on the side of fewer comments, brevity and blocking issues only.
Avoid posting any refactoring issues.

Files:

• packages/backend/src/tokens/clerkRequest.ts
• packages/backend/package.json

packages/*/package.json

📄 CodeRabbit inference engine (.cursor/rules/development.mdc)

packages/*/package.json: Packages should export TypeScript types alongside runtime code
Follow semantic versioning for all packages

All packages must be published under @clerk namespace

packages/*/package.json: Framework packages should depend on @clerk/clerk-js for core functionality
@clerk/shared should be a common dependency for most packages in the monorepo

Files:

• packages/backend/package.json

**/package.json

📄 CodeRabbit inference engine (.cursor/rules/global.mdc)

Use pnpm as the package manager for this monorepo

Files:

• packages/backend/package.json

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: semgrep-cloud-platform/scan

🔇 Additional comments (2)

packages/backend/src/tokens/clerkRequest.ts (1)

1-1: Import change aligns with dependency update.

The import source change is consistent with the package.json dependency update. The correctness of this change depends on verification that cookie-es provides an API-compatible parse function (flagged in package.json review).

packages/backend/package.json (1)

113-113: No issues found. The cookie-es package is a verified drop-in replacement with an identical parse() function signature and no security concerns.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[wobsoriano]

Hello! Thank you for this but we're closing this PR in favor of #7524.

The PR bundles the cookie package to support both CJS and ESM environments without locking them to ESM-only port of cookie.

[Ayush2k02]

Yeah, makes a lot of sense to go #7524