Skip to content

fix(shared): Preserve import.meta without requiring ES2020 target#5203

Closed
wobsoriano wants to merge 8 commits into
mainfrom
rob/fix-shared-browser-compatibility
Closed

fix(shared): Preserve import.meta without requiring ES2020 target#5203
wobsoriano wants to merge 8 commits into
mainfrom
rob/fix-shared-browser-compatibility

Conversation

@wobsoriano

@wobsoriano wobsoriano commented Feb 20, 2025

Copy link
Copy Markdown
Member

Description

In #4985, we introduced a shared function that checks if environment variables exist across different platforms (Node.js, Vite, Cloudflare, etc). To support Vite's import.meta.env, we set the build target to ES2020, but this broke support for older browsers due to ES2020 features like optional chaining.

This PR removes the added ES2020 target, but preserves the import.meta functionality via a plugin. The plugin removes esbuild's var import_meta = {} transformation and restores the original import.meta references in ESM builds only, while maintaining compatibility with older browsers.

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@changeset-bot

changeset-bot Bot commented Feb 20, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 322f1b6

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

This PR includes changesets to release 20 packages
Name Type
@clerk/shared Minor
@clerk/agent-toolkit Patch
@clerk/astro Patch
@clerk/backend Patch
@clerk/chrome-extension Patch
@clerk/clerk-js Patch
@clerk/elements Patch
@clerk/expo-passkeys Patch
@clerk/clerk-expo Patch
@clerk/express Patch
@clerk/fastify Patch
@clerk/nextjs Patch
@clerk/nuxt Patch
@clerk/react-router Patch
@clerk/clerk-react Patch
@clerk/remix Patch
@clerk/tanstack-start Patch
@clerk/testing Patch
@clerk/ui Patch
@clerk/vue 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 Feb 20, 2025

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
clerk-js-sandbox ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 20, 2025 5:45am

@wobsoriano

Copy link
Copy Markdown
Member Author

!snapshot

@clerk-cookie

Copy link
Copy Markdown
Collaborator

Hey @wobsoriano - the snapshot version command generated the following package versions:

Package Version
@clerk/agent-toolkit 0.0.4-snapshot.v20250220050105
@clerk/astro 2.3.0-snapshot.v20250220050105
@clerk/backend 1.24.3-snapshot.v20250220050105
@clerk/chrome-extension 2.2.11-snapshot.v20250220050105
@clerk/clerk-js 5.54.0-snapshot.v20250220050105
@clerk/elements 0.23.0-snapshot.v20250220050105
@clerk/clerk-expo 2.8.0-snapshot.v20250220050105
@clerk/expo-passkeys 0.1.22-snapshot.v20250220050105
@clerk/express 1.3.50-snapshot.v20250220050105
@clerk/fastify 2.1.23-snapshot.v20250220050105
@clerk/localizations 3.10.8-snapshot.v20250220050105
@clerk/nextjs 6.12.1-snapshot.v20250220050105
@clerk/nuxt 1.2.1-snapshot.v20250220050105
@clerk/clerk-react 5.24.0-snapshot.v20250220050105
@clerk/react-router 1.1.1-snapshot.v20250220050105
@clerk/remix 4.5.1-snapshot.v20250220050105
@clerk/shared 2.23.0-snapshot.v20250220050105
@clerk/tanstack-start 0.10.1-snapshot.v20250220050105
@clerk/testing 1.4.24-snapshot.v20250220050105
@clerk/themes 2.2.20-snapshot.v20250220050105
@clerk/types 4.47.0-snapshot.v20250220050105
@clerk/ui 0.3.25-snapshot.v20250220050105
@clerk/vue 1.3.0-snapshot.v20250220050105

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.0.4-snapshot.v20250220050105 --save-exact

@clerk/astro

npm i @clerk/astro@2.3.0-snapshot.v20250220050105 --save-exact

@clerk/backend

npm i @clerk/backend@1.24.3-snapshot.v20250220050105 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@2.2.11-snapshot.v20250220050105 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.54.0-snapshot.v20250220050105 --save-exact

@clerk/elements

npm i @clerk/elements@0.23.0-snapshot.v20250220050105 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.8.0-snapshot.v20250220050105 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@0.1.22-snapshot.v20250220050105 --save-exact

@clerk/express

npm i @clerk/express@1.3.50-snapshot.v20250220050105 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.1.23-snapshot.v20250220050105 --save-exact

@clerk/localizations

npm i @clerk/localizations@3.10.8-snapshot.v20250220050105 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@6.12.1-snapshot.v20250220050105 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@1.2.1-snapshot.v20250220050105 --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.24.0-snapshot.v20250220050105 --save-exact

@clerk/react-router

npm i @clerk/react-router@1.1.1-snapshot.v20250220050105 --save-exact

@clerk/remix

npm i @clerk/remix@4.5.1-snapshot.v20250220050105 --save-exact

@clerk/shared

npm i @clerk/shared@2.23.0-snapshot.v20250220050105 --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.10.1-snapshot.v20250220050105 --save-exact

@clerk/testing

npm i @clerk/testing@1.4.24-snapshot.v20250220050105 --save-exact

@clerk/themes

npm i @clerk/themes@2.2.20-snapshot.v20250220050105 --save-exact

@clerk/types

npm i @clerk/types@4.47.0-snapshot.v20250220050105 --save-exact

@clerk/ui

npm i @clerk/ui@0.3.25-snapshot.v20250220050105 --save-exact

@clerk/vue

npm i @clerk/vue@1.3.0-snapshot.v20250220050105 --save-exact

const text = new TextDecoder().decode(contents);

// Remove esbuild's var import_meta = {} transformation and restore original import.meta references
const modified = text.replace(/var\s+import_meta\s*=\s*{};/g, '').replace(/import_meta/g, 'import.meta');

@wobsoriano wobsoriano Feb 20, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

This restores the original import.meta references

Example built file:

Screenshot 2025-02-19 at 9 08 19 PM

without the plugin and ES2020 target, it gets transformed to:

var import_meta = {};

// ... other code
if (typeof import_meta !== "undefined" && import_meta.env && typeof import_meta.env[name] === "string") {
    return import_meta.env[name];
  }

@@ -0,0 +1,5 @@
---
"@clerk/shared": minor

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Since we're removing the target...

@wobsoriano

Copy link
Copy Markdown
Member Author

Closing this as we want to keep the state of the shared package and fix the issue in clerk-js side instead

@wobsoriano wobsoriano closed this Feb 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants