fix(elements): Remove "use client" and mark packages as client-only i…

…nstead (#3014)

* chore(elements): Add package

* fix(elements): Remove directives, add import to entrypoints

* chore(elements): Bump version

.changeset/real-flowers-flow.md

@@ -0,0 +1,2 @@
+---
+---

packages/elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clerk/elements",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "description": "Clerk Elements",
   "keywords": [
     "clerk",
@@ -72,6 +72,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@statelyai/inspect": "^0.1.0",
     "@xstate/react": "^4.1.0",
+    "client-only": "^0.0.1",
     "xstate": "^5.7.1"
   },
   "devDependencies": {

packages/elements/src/react/common/index.ts

@@ -1,3 +1,6 @@
+// Mark as a client-only package. This will error if you try to import it in a React Server Component.
+import 'client-only';
+
 export { Field, FieldError, FieldState, GlobalError, Input, Label, Submit } from '~/react/common/form';
 export { ProviderIcon } from '~/react/common/providers';
 

packages/elements/src/react/router/react.tsx

@@ -1,4 +1,3 @@
-'use client';
 import { createContext, useContext } from 'react';
 
 import type { ClerkHostRouter, ClerkRouter } from './router';

packages/elements/src/react/sign-in/choose-strategy.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { SignInFactor, SignInFirstFactor, SignInStrategy as TSignInStrategy } from '@clerk/types';
 import { Slot } from '@radix-ui/react-slot';
 import { useSelector } from '@xstate/react';

packages/elements/src/react/sign-in/index.ts

@@ -1,4 +1,5 @@
-'use client';
+// Mark as a client-only package. This will error if you try to import it in a React Server Component.
+import 'client-only';
 
 import { SignInRouterCtx } from './context';
 

packages/elements/src/react/sign-in/navigation.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Slot } from '@radix-ui/react-slot';
 import * as React from 'react';
 

packages/elements/src/react/sign-in/providers.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { OAuthProvider, Web3Provider } from '@clerk/types';
 
 import type { ProviderProps } from '~/react/common/providers';

packages/elements/src/react/sign-in/root.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { ClerkLoaded, useClerk } from '@clerk/clerk-react';
 import { useEffect } from 'react';
 import { createActor } from 'xstate';

packages/elements/src/react/sign-in/start.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { TSignInStartMachine } from '~/internals/machines/sign-in/machines';
 import { SignInStartMachine } from '~/internals/machines/sign-in/machines';
 import type { FormProps } from '~/react/common/form';

packages/elements/src/react/sign-in/verifications.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { SignInStrategy as ClerkSignInStrategy } from '@clerk/types';
 import { useSelector } from '@xstate/react';
 import { useCallback } from 'react';

packages/elements/src/react/sign-up/continue.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { SignUpContinueMachine, type TSignUpContinueMachine } from '~/internals/machines/sign-up/machines';
 import type { FormProps } from '~/react/common/form';
 import { Form } from '~/react/common/form';

packages/elements/src/react/sign-up/index.ts

@@ -1,4 +1,5 @@
-'use client';
+// Mark as a client-only package. This will error if you try to import it in a React Server Component.
+import 'client-only';
 
 import { SignUpRouterCtx } from '~/react/sign-up/context';
 

packages/elements/src/react/sign-up/navigation.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Slot } from '@radix-ui/react-slot';
 import * as React from 'react';
 

packages/elements/src/react/sign-up/providers.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { OAuthProvider, Web3Provider } from '@clerk/types';
 
 import type { ProviderProps } from '~/react/common/providers';

packages/elements/src/react/sign-up/root.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { ClerkLoaded, useClerk } from '@clerk/clerk-react';
 import { useSelector } from '@xstate/react';
 import { useEffect } from 'react';

packages/elements/src/react/sign-up/start.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { TSignUpStartMachine } from '~/internals/machines/sign-up/machines';
 import { SignUpStartMachine } from '~/internals/machines/sign-up/machines';
 import type { FormProps } from '~/react/common/form';

packages/elements/src/react/sign-up/verifications.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { TSignUpVerificationMachine } from '~/internals/machines/sign-up/machines';
 import { SignUpVerificationMachine } from '~/internals/machines/sign-up/machines';
 import type { SignUpVerificationFriendlyTags, SignUpVerificationTags } from '~/internals/machines/sign-up/types';