Skip to content

fix(react): Use globalThis instead of bare global in the browser Clerk loader#8909

Merged
jacekradko merged 1 commit into
mainfrom
jacek/fix-react-global-shim-8871
Jun 18, 2026
Merged

fix(react): Use globalThis instead of bare global in the browser Clerk loader#8909
jacekradko merged 1 commit into
mainfrom
jacek/fix-react-global-shim-8871

Conversation

@jacekradko

@jacekradko jacekradko commented Jun 18, 2026

Copy link
Copy Markdown
Member

Fixes #8871. <ClerkProvider> crashed in production builds (TanStack Start, React Router) with ReferenceError: global is not defined. The loader read a bare global.Clerk that only resolved via the window.global polyfill on the package's main entry, but the provider comes in through @clerk/react/internal, which never imports that polyfill; since the tsdown migration (#8177) split the package into chunks, a production bundle can reach the loader with the polyfill absent. Using globalThis drops the dependency.

The bit worth scrutiny is the type change: declare const global only typed the global name, so globalThis.Clerk needs a declare global augmentation. It's intentionally not emitted into the public .d.ts, so consumers don't gain an ambient Clerk global. The window.global polyfill is kept for older clerk-js runtimes.

Summary by CodeRabbit

  • Bug Fixes
    • Fixed a runtime initialization error that occurred in production environments during ClerkProvider startup, particularly in applications using TanStack Start and React Router. The fix improves compatibility across different bundler configurations and ensures reliable operation in all supported environments.

@changeset-bot

changeset-bot Bot commented Jun 18, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 3ab67ad

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages
Name Type
@clerk/react Patch
@clerk/chrome-extension Patch
@clerk/expo Patch
@clerk/nextjs Patch
@clerk/react-router Patch
@clerk/tanstack-react-start Patch

Not sure what this means? Click here to learn what changesets are.

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

@vercel

vercel Bot commented Jun 18, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
clerk-js-sandbox Ready Ready Preview, Comment Jun 18, 2026 1:08am
swingset Ready Ready Preview, Comment Jun 18, 2026 1:08am

Request Review

@coderabbitai

coderabbitai Bot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro

Run ID: a83139a1-1b11-4fe8-9d36-de156602f4ce

📥 Commits

Reviewing files that changed from the base of the PR and between 27fc09a and 3ab67ad.

📒 Files selected for processing (2)
  • .changeset/silly-pumas-cheer.md
  • packages/react/src/isomorphicClerk.ts
✅ Files skipped from review due to trivial changes (1)
  • .changeset/silly-pumas-cheer.md

📝 Walkthrough

Walkthrough

The PR fixes a production ReferenceError: global is not defined in ClerkProvider by replacing all global.* references in isomorphicClerk.ts with globalThis.*. The exported Global interface and declare const global typing are removed in favor of a declare global augmentation. A changeset entry documents the patch release.

Changes

globalThis migration fix

Layer / File(s) Summary
Type declarations and runtime globalThis lookups
packages/react/src/isomorphicClerk.ts, .changeset/silly-pumas-cheer.md
Removes the exported Global interface and declare const global: Global typing, replacing them with a declare global augmentation defining globalThis.Clerk and globalThis.__internal_ClerkUICtor. Updates getClerkJsEntryChunk to assign and read globalThis.Clerk with an explicit throw if undefined, and updates getClerkUIEntryChunk to read globalThis.__internal_ClerkUICtor with the same guard. Changeset documents the patch.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related issues

Possibly related PRs

  • clerk/javascript#8773: Both PRs modify packages/react/src/isomorphicClerk.ts, specifically getClerkUIEntryChunk's loading and guard logic around __internal_ClerkUICtor.

Suggested reviewers

  • tmilewski

Poem

🐇 A bunny once tripped on a global unknown,
The bundler had shuffled—its polyfill not shown.
"Use globalThis!" cried the rabbit with glee,
One universal object, as standard as can be.
No more ReferenceError to ruin the day! 🎉

🚥 Pre-merge checks | ✅ 5
✅ 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 accurately describes the main fix: replacing bare global with globalThis in the browser Clerk loader, which directly addresses the ReferenceError bug in production builds.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch

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

@github-actions

github-actions Bot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

API Changes Report

Generated by Break Check on 2026-06-18T01:09:41.055Z

Summary

Metric Count
Packages analyzed 19
Packages with changes 0
🔴 Breaking changes 0
🟡 Non-breaking changes 0
🟢 Additions 0

No API Changes Detected

All packages have stable APIs with no detected changes.


Report generated by Break Check

Last ran on 3ab67ad.

…k loader

The browser loader in isomorphicClerk read/wrote a bare `global.Clerk`
identifier that only resolved because of the `window.global` polyfill
side-effect on the package's main entry. The provider runs through
`@clerk/react/internal`, which never imports that polyfill, so after the
tsup to tsdown migration split the package into separate chunks a downstream
production build could reach the loader with `global` undefined and throw
`ReferenceError: global is not defined`.

Switch the loader to `globalThis` (always defined; equals `window` in the
browser, where clerk-js writes `window.Clerk`) and add a `declare global`
augmentation so it type-checks. The polyfill is kept for backward-compat.

Fixes #8871

@wobsoriano wobsoriano left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

@jacekradko jacekradko merged commit fb11e32 into main Jun 18, 2026
47 of 48 checks passed
@jacekradko jacekradko deleted the jacek/fix-react-global-shim-8871 branch June 18, 2026 01:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

TanStack Start ClerkProvider can fail when global shim is split into lazy chunk

2 participants