diff --git a/.changeset/fuzzy-radios-tease.md b/.changeset/fuzzy-radios-tease.md new file mode 100644 index 00000000000..2b1e1a5be4a --- /dev/null +++ b/.changeset/fuzzy-radios-tease.md @@ -0,0 +1,5 @@ +--- +"@clerk/shared": minor +--- + +Fix compatibility with iOS 12 and older browsers while maintaining Vite support diff --git a/packages/shared/tsup.config.ts b/packages/shared/tsup.config.ts index 6515b9da11d..cc44db2df56 100644 --- a/packages/shared/tsup.config.ts +++ b/packages/shared/tsup.config.ts @@ -24,9 +24,8 @@ export default defineConfig(overrideOptions => { minify: false, sourcemap: true, dts: true, - target: 'es2020', external: ['react', 'react-dom'], - esbuildPlugins: [WebWorkerMinifyPlugin as any], + esbuildPlugins: [WebWorkerMinifyPlugin as any, PreserveImportMetaPlugin], define: { PACKAGE_NAME: `"${name}"`, PACKAGE_VERSION: `"${version}"`, @@ -49,3 +48,28 @@ export const WebWorkerMinifyPlugin: Plugin = { }); }, }; + +/** + * Preserves import.meta functionality in ESM builds while maintaining ES5 compatibility. + * We originally used target: 'es2020' to handle this but it broke support for older browsers (e.g. iOS 12). + */ +const PreserveImportMetaPlugin: Plugin = { + name: 'PreserveImportMetaPlugin', + setup(build) { + build.onEnd(result => { + if (!result.outputFiles) return; + + result.outputFiles.forEach(file => { + if (!file.path.endsWith('.mjs')) return; + + const contents = file.contents; + 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'); + + file.contents = new TextEncoder().encode(modified); + }); + }); + }, +};