fix(elements): Update peerDeps to allow Next 15 and React 19

.changeset/good-paws-wonder.md

@@ -0,0 +1,5 @@
+---
+'@clerk/elements': patch
+---
+
+Widen optional peerDependency of `next` to include `>=15.0.0-rc`. This way you can use Next.js 15 with Clerk Elements without your package manager complaining. Also allow React 19.

packages/elements/package.json

@@ -95,9 +95,9 @@
   "peerDependencies": {
     "@clerk/clerk-react": "^5.0.0",
     "@clerk/shared": "^2.0.0",
-    "next": "^13.5.4 || ^14.0.3",
-    "react": ">=18",
-    "react-dom": ">=18"
+    "next": "^13.5.4 || ^14.0.3 || ^15.0.0-rc",
+    "react": "^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^18.0.0 || ^19.0.0-beta"
   },
   "peerDependenciesMeta": {
     "next": {

packages/elements/src/index.ts

@@ -1,6 +1,5 @@
-// TODO: Add link to docs
 throw new Error(`No exports are available from the top-level "@clerk/elements" package.
 Use specific subpath imports instead, e.g. "@clerk/elements/sign-in".
 
 Find all available exports in the documentation:
-https://clerk.com/docs`);
+https://clerk.com/docs/elements/overview`);

packages/elements/src/internals/machines/shared/shared.actors.ts

@@ -1,24 +1,6 @@
 import type { Clerk, LoadedClerk } from '@clerk/types';
 import type { EventObject } from 'xstate';
-import { fromCallback, fromPromise } from 'xstate';
-
-import { ClerkElementsRuntimeError } from '~/internals/errors';
-
-// TODO: Remove
-/** @deprecated Use clerkLoader instead */
-export const waitForClerk = fromPromise<LoadedClerk, Clerk | LoadedClerk>(({ input: clerk }) => {
-  return new Promise((resolve, reject) => {
-    if (clerk.loaded) {
-      resolve(clerk as LoadedClerk);
-    } else if ('addOnLoaded' in clerk) {
-      // @ts-expect-error - Expects addOnLoaded from IsomorphicClerk.
-      // We don't want internals to rely on the @clerk/clerk-react package
-      clerk.addOnLoaded(() => resolve(clerk as LoadedClerk));
-    } else {
-      reject(new ClerkElementsRuntimeError('Clerk client could not be loaded'));
-    }
-  });
-});
+import { fromCallback } from 'xstate';
 
 export type ClerkLoaderEvents = { type: 'CLERK.READY' } | { type: 'CLERK.ERROR'; message: string };
 

packages/elements/src/react/router/__tests__/router.test.ts

@@ -35,6 +35,15 @@ describe('createClerkRouter', () => {
     expect(clerkRouter.match(path)).toBe(true);
   });
 
+  it('normalizes path arguments internally', () => {
+    const path = 'dashboard/';
+    const clerkRouter = createClerkRouter(mockRouter, 'app/');
+
+    mockRouter.pathname.mockReturnValue('/app/dashboard');
+
+    expect(clerkRouter.match(path)).toBe(true);
+  });
+
   it('throws an error when no path is provided', () => {
     const clerkRouter = createClerkRouter(mockRouter, '/app');