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

@jacekradkojacekradko commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

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-botBot 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
NameType
@clerk/reactPatch
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/nextjsPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch

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

vercelBot commented Jun 18, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJun 18, 2026 1:08am
swingsetReadyReadyPreview, CommentJun 18, 2026 1:08am

Request Review

@coderabbitai

coderabbitaiBot 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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe 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✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck 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-actionsBot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

API Changes Report

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

Summary

MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0

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

@wobsorianowobsoriano 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 mainJun 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 freeto 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

@jacekradko@wobsoriano
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
fix(react): Use globalThis instead of bare global in the browser Clerk loader by jacekradko · Pull Request #8909 · clerk/javascript · GitHub
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

@jacekradkojacekradko commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

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-botBot 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
NameType
@clerk/reactPatch
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/nextjsPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch

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

vercelBot commented Jun 18, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJun 18, 2026 1:08am
swingsetReadyReadyPreview, CommentJun 18, 2026 1:08am

Request Review

@coderabbitai

coderabbitaiBot 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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe 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✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck 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-actionsBot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

API Changes Report

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

Summary

MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0

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

@wobsorianowobsoriano 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 mainJun 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 freeto 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

@jacekradko@wobsoriano
, 'i'); if (__m === '*' || __re.test(location.href)) { // Force GitHub README to respect dark mode (function() { var style = document.createElement('style'); style.textContent = ' .markdown-body { color-scheme: dark light; } .markdown-body pre { background: #161b22 !important; } .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; } .markdown-body table th, .markdown-body table td { border-color: #30363d !important; } .markdown-body img { background: #0d1117; } .markdown-body blockquote { border-left-color: #8b949e; } .markdown-body hr { border-color: #30363d; } '; document.head.appendChild(style); })(); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' fix(react): Use globalThis instead of bare global in the browser Clerk loader by jacekradko · Pull Request #8909 · clerk/javascript · GitHub
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

@jacekradkojacekradko commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

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-botBot 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
NameType
@clerk/reactPatch
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/nextjsPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch

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

vercelBot commented Jun 18, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJun 18, 2026 1:08am
swingsetReadyReadyPreview, CommentJun 18, 2026 1:08am

Request Review

@coderabbitai

coderabbitaiBot 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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe 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✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck 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-actionsBot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

API Changes Report

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

Summary

MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0

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

@wobsorianowobsoriano 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 mainJun 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 freeto 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

@jacekradko@wobsoriano
, 'i'); if (__m === '*' || __re.test(location.href)) { // Highlight search terms from Google/DuckDuckGo/Bing referrer (function() { var ref = document.referrer; var terms = []; if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) { var url = new URL(ref); var q = url.searchParams.get('q') || url.searchParams.get('p'); if (q) { terms = q.split(/\s+/).filter(function(t) { return t.length > 2; }); } } if (terms.length === 0) return; var style = document.createElement('style'); style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }'; document.head.appendChild(style); function highlight(node) { if (node.nodeType === 3) { // text node var text = node.textContent; var found = false; terms.forEach(function(term) { var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' fix(react): Use globalThis instead of bare global in the browser Clerk loader by jacekradko · Pull Request #8909 · clerk/javascript · GitHub
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

@jacekradkojacekradko commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

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-botBot 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
NameType
@clerk/reactPatch
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/nextjsPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch

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

vercelBot commented Jun 18, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJun 18, 2026 1:08am
swingsetReadyReadyPreview, CommentJun 18, 2026 1:08am

Request Review

@coderabbitai

coderabbitaiBot 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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe 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✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck 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-actionsBot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

API Changes Report

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

Summary

MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0

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

@wobsorianowobsoriano 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 mainJun 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 freeto 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

@jacekradko@wobsoriano
, 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ' fix(react): Use globalThis instead of bare global in the browser Clerk loader by jacekradko · Pull Request #8909 · clerk/javascript · GitHub
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

@jacekradkojacekradko commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

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-botBot 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
NameType
@clerk/reactPatch
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/nextjsPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch

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

vercelBot commented Jun 18, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJun 18, 2026 1:08am
swingsetReadyReadyPreview, CommentJun 18, 2026 1:08am

Request Review

@coderabbitai

coderabbitaiBot 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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe 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✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck 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-actionsBot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

API Changes Report

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

Summary

MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0

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

@wobsorianowobsoriano 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 mainJun 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 freeto 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

@jacekradko@wobsoriano
, 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' fix(react): Use globalThis instead of bare global in the browser Clerk loader by jacekradko · Pull Request #8909 · clerk/javascript · GitHub
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

@jacekradkojacekradko commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

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-botBot 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
NameType
@clerk/reactPatch
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/nextjsPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch

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

vercelBot commented Jun 18, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJun 18, 2026 1:08am
swingsetReadyReadyPreview, CommentJun 18, 2026 1:08am

Request Review

@coderabbitai

coderabbitaiBot 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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe 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✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck 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-actionsBot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

API Changes Report

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

Summary

MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0

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

@wobsorianowobsoriano 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 mainJun 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 freeto 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

@jacekradko@wobsoriano
, 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ' fix(react): Use globalThis instead of bare global in the browser Clerk loader by jacekradko · Pull Request #8909 · clerk/javascript · GitHub
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

@jacekradkojacekradko commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

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-botBot 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
NameType
@clerk/reactPatch
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/nextjsPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch

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

vercelBot commented Jun 18, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJun 18, 2026 1:08am
swingsetReadyReadyPreview, CommentJun 18, 2026 1:08am

Request Review

@coderabbitai

coderabbitaiBot 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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe 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✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck 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-actionsBot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

API Changes Report

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

Summary

MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0

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

@wobsorianowobsoriano 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 mainJun 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 freeto 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

@jacekradko@wobsoriano
, 'i'); if (__m === '*' || __re.test(location.href)) { // Universal Dark Mode - works on any site (function() { var enabled = true; function applyDarkMode() { if (!enabled) return; // Create style element if it doesn't exist var style = document.getElementById('universal-dark-mode-style'); if (!style) { style = document.createElement('style'); style.id = 'universal-dark-mode-style'; document.head.appendChild(style); } // Dark mode CSS - inverts colors but preserves images/video style.textContent = ' /* Invert everything except media */ html { filter: invert(1) hue-rotate(180deg) !important; background: #1a1a2e !important; } /* Restore images, videos, iframes, canvas */ img, video, iframe, canvas, svg, picture, [style*="background-image"] { filter: invert(1) hue-rotate(180deg) !important; } /* Preserve specific elements that should not be inverted */ .no-dark-mode, .no-dark-mode *, [data-theme="light"], [data-theme="light"], .ace_editor, .ace_editor *, .CodeMirror, .CodeMirror *, .monaco-editor, .monaco-editor *, .markdown-body pre, .markdown-body pre *, .highlight, .highlight *, pre code, pre code * { filter: none !important; } /* Fix common UI elements */ .modal, .popup, .dropdown-menu, .tooltip, .popover { filter: invert(1) hue-rotate(180deg) !important; background: #2d2d44 !important; border-color: #444 !important; } /* Scrollbars */ ::-webkit-scrollbar { background: #1a1a2e !important; } ::-webkit-scrollbar-thumb { background: #444 !important; } ::-webkit-scrollbar-thumb:hover { background: #555 !important; } /* Selection */ ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; } ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; } '; } function removeDarkMode() { var style = document.getElementById('universal-dark-mode-style'); if (style) style.remove(); } // Toggle with Alt+Shift+D document.addEventListener('keydown', function(e) { if (e.altKey && e.shiftKey && e.key === 'D') { e.preventDefault(); enabled = !enabled; if (enabled) { applyDarkMode(); console.log('[Universal Dark Mode] Enabled'); } else { removeDarkMode(); console.log('[Universal Dark Mode] Disabled'); } } }); // Apply on load applyDarkMode(); // Re-apply on dynamic content var observer = new MutationObserver(function(mutations) { if (enabled && !document.getElementById('universal-dark-mode-style')) { applyDarkMode(); } }); observer.observe(document.head, { childList: true }); console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle'); })(); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })(); fix(react): Use globalThis instead of bare global in the browser Clerk loader by jacekradko · Pull Request #8909 · clerk/javascript · GitHub
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

@jacekradkojacekradko commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

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-botBot 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
NameType
@clerk/reactPatch
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/nextjsPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch

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

vercelBot commented Jun 18, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJun 18, 2026 1:08am
swingsetReadyReadyPreview, CommentJun 18, 2026 1:08am

Request Review

@coderabbitai

coderabbitaiBot 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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe 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✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck 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-actionsBot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

API Changes Report

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

Summary

MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0

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

@wobsorianowobsoriano 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 mainJun 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 freeto 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

@jacekradko@wobsoriano