@clerk/react-router using CloudFare Template #4759
Comments
LekoArts
added
confirmed
and removed
needs-triage
|
Hello, thanks for the issue! I've ran your reproduction and can confirm that it it fails with [vite-node-miniflare error]
ReferenceError: require is not defined
at /Users/lejoe/code/playground/importbug/node_modules/snakecase-keys/index.js:3:13
I've got it working like this:
|
|
Hi @LekoArts, thanks for the reply. It is no longer throwing errors, but now I cannot get the Here is my root file import {
isRouteErrorResponse,
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "react-router"
import { rootAuthLoader } from '@clerk/react-router/ssr.server'
import type { Route } from "./+types/root"
import stylesheet from "./app.css?url"
import { ClerkProvider } from '@clerk/react-router'
export const loader = async (args: Route.LoaderArgs) => {
return rootAuthLoader(args, () => {
return {}
}, {
secretKey: args.context.cloudflare.env.CLERK_SECRET_KEY,
publishableKey: args.context.cloudflare.env.CLERK_PUBLISHABLE_KEY,
})
}
export const links: Route.LinksFunction = () => [
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
{
rel: "preconnect",
href: "https://fonts.gstatic.com",
crossOrigin: "anonymous",
},
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
},
{ rel: "stylesheet", href: stylesheet },
]
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
{children}
<ScrollRestoration />
<Scripts />
</body>
</html>
)
}
export default function App({ loaderData }: Route.ComponentProps) {
return <ClerkProvider loaderData={loaderData} >
<Outlet />
</ClerkProvider>
}
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
let message = "Oops!"
let details = "An unexpected error occurred."
let stack: string | undefined
if (isRouteErrorResponse(error)) {
message = error.status === 404 ? "404" : "Error"
details =
error.status === 404
? "The requested page could not be found."
: error.statusText || details
} else if (import.meta.env.DEV && error && error instanceof Error) {
details = error.message
stack = error.stack
}
return (
<main className="pt-16 p-4 container mx-auto">
<h1>{message}</h1>
<p>{details}</p>
{stack && (
<pre className="w-full p-4 overflow-x-auto">
<code>{stack}</code>
</pre>
)}
</main>
)
} |
Preliminary Checks
I have reviewed the documentation: https://clerk.com/docs
I have searched for existing issues: https://github.com/clerk/javascript/issues
I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.
Reproduction
https://github.com/lydiaf/importbug
Publishable key
Description
Steps to reproduce:
Expected behavior:
App loads
Actual behavior:
App does not load with input
--
I am just experiencing this with Cloudflare template, not Vercel template.
Environment
The text was updated successfully, but these errors were encountered: