Turnstile: Seeing "$" at the bottom of the page in production in remix app.
export function RootFileLayout({ children }: Readonly<{ children: React.ReactNode }>) {
const data = useLoaderData()
const turnstileSiteKey = data?.ENV?.turnstileSiteKey
const [verified, setVerified] = useState(false)
useEffect(() => {
const checkCaptcha = () => {
if (window?.turnstile) {
window?.turnstile?.render('#captcha-container', {
sitekey: turnstileSiteKey,
// className: 'cf-turnstile',
callback: (token: string) => {
// console.log('Captcha verified:', token)
setVerified(true)
},
})
}
}
// * Prevent loading the script multiple times
if (!document.getElementById('turnstile-script')) {
const script = document.createElement('script')
script.id = 'turnstile-script'
script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js'
script.async = true
script.defer = true
script.onload = checkCaptcha
document.body.appendChild(script)
} else {
checkCaptcha() // * If already loaded, trigger manually
}
}, [])
return (
<html lang="en" data-theme="light">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
{verified ? (
<>
<CookieConsentBanner />
<Toaster position="top-right" />
{children}
</>
) : (
<div className="flex h-screen items-center justify-center bg-gray-100">
<div id="captcha-container" className='cf-turnstile'></div>
</div>
)}
<ScrollRestoration />
<Scripts />
</body>
</html>
)
}export function RootFileLayout({ children }: Readonly<{ children: React.ReactNode }>) {
const data = useLoaderData()
const turnstileSiteKey = data?.ENV?.turnstileSiteKey
const [verified, setVerified] = useState(false)
useEffect(() => {
const checkCaptcha = () => {
if (window?.turnstile) {
window?.turnstile?.render('#captcha-container', {
sitekey: turnstileSiteKey,
// className: 'cf-turnstile',
callback: (token: string) => {
// console.log('Captcha verified:', token)
setVerified(true)
},
})
}
}
// * Prevent loading the script multiple times
if (!document.getElementById('turnstile-script')) {
const script = document.createElement('script')
script.id = 'turnstile-script'
script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js'
script.async = true
script.defer = true
script.onload = checkCaptcha
document.body.appendChild(script)
} else {
checkCaptcha() // * If already loaded, trigger manually
}
}, [])
return (
<html lang="en" data-theme="light">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
{verified ? (
<>
<CookieConsentBanner />
<Toaster position="top-right" />
{children}
</>
) : (
<div className="flex h-screen items-center justify-center bg-gray-100">
<div id="captcha-container" className='cf-turnstile'></div>
</div>
)}
<ScrollRestoration />
<Scripts />
</body>
</html>
)
}This is the code I am using.
