Next.js Discord

Discord Forum

App feature failing after the build

Unanswered
Kurilian Bobtail posted this in #help-forum
Open in Discord
Kurilian BobtailOP
Hello,
I am working on a signup form where i am using "react-google-recaptcha" library to implement google recaptcha.
Its working fine while development but once i created a build and run the build i am getting "ERROR for site owner: Invalid site key"

I have cross checked site key, versions, checked is the site key is accessible on the page,
All looks good.
below is part of code,

import { reCaptchaSiteKey } from "@/app/..../applicationInfo";
const ReCAPTCHA = dynamic(() => import("react-google-recaptcha"), {
ssr: false,
});

const ReCAPTCHAWithRef = forwardRef((props: any, ref: any) => (
<ReCAPTCHA {...props} ref={ref} />
));

ReCAPTCHAWithRef.displayName = "ReCAPTCHAWithRef";
const ComponentName = ()=>{

return(
......
<ReCAPTCHAWithRef
sitekey={reCaptchaSiteKey}
size="invisible"
ref={reRef}
/>

....
)
}

In the DOM I can not see the sitekey value too.
I think this is happening due to build process, I might be missing something.

2 Replies

Field Spaniel
when you render the ReCAPTCHAWithRef component the reCaptchaSiteKey is immediately available? If not you could render the captcha conditionally only if you have the key.
Kurilian BobtailOP
Yes