Remix is no longer supported in core 3. Switch to React Router or Downgrade to Core 2.
<ClerkFailed>
The <ClerkFailed> component indicates that the Clerk object has failed to load. This is useful for displaying an error message to the user.
Example
It's not recommended to wrap the entire app in control components; instead, only wrap the components that need access to the Clerk object, such as .
import { ClerkLoading, ClerkLoaded, ClerkDegraded, ClerkFailed } from '@clerk/remix'
export default function Index() {
return (
<>
<ClerkLoading>
<p>Clerk is loading...</p>
</ClerkLoading>
<ClerkLoaded>
<p>Clerk has loaded (ready or degraded)</p>
<MyCustomSignInFlow />
<ClerkDegraded>
<p>Clerk is experiencing issues. Please try again later.</p>
</ClerkDegraded>
</ClerkLoaded>
<ClerkFailed>
<p>Something went wrong with Clerk. Please contact support.</p>
</ClerkFailed>
</>
)
}Feedback
Last updated on