[hCaptcha] render: invalid container 'null'.

[abdulsamad]

hCaptcha is not a rendering giving an error "[hCaptcha] render: invalid container 'null'".

Browser - Chrome (v87.0.4280.141) Technologies - Gatsby Styled-components

{/* Fails to render */}
<Contact id='contact'>
      <Container>
        <Form name='contact' onSubmit={handleSubmit}>
          <FormHeading>Get in touch!</FormHeading>
          {error && <Error>{error}</Error>}
          <Field>
            <Input
              type='text'
              placeholder='Your Name'
              name='name'
              onChange={handleChange('name')}
              required
            />
            <Label>Name</Label>
            <span />
          </Field>
          <Field>
            <Input
              type='email'
              placeholder='john@example.com'
              name='email'
              onChange={handleChange('email')}
              required
            />
            <Label>Email</Label>
            <span />
          </Field>
          <Field>
            <Textarea
              rows={5}
              placeholder='Enter your message here...'
              name='message'
              onChange={handleChange('message')}
              required
            />
            <Label>Message</Label>
            <span />
          </Field>
         {/* Field is a div tag */}
          <Field>
            <HCaptcha
              ref={hCaptchaRef}
              sitekey={process.env.GATSBY_SITE_RECAPTCHA_KEY}
              onVerify={handleCaptchaSuccess}
              onExpire={handleCaptchaExpire}
              onError={handleCaptchaError}
              theme='dark'
            />
          </Field>
          <SubmitBtn type='submit'>Send</SubmitBtn>
        </Form>
      </Container>
 </Contact>

it only works after wrapping it in a form tag without any sibling. The nesting of the form tag is also not valid I guess.

{/* Works */}
<Contact id='contact'>
      <Container>
        <Form name='contact' onSubmit={handleSubmit}>
          <FormHeading>Get in touch!</FormHeading>
          {error && <Error>{error}</Error>}
          <Field>
            <Input
              type='text'
              placeholder='Your Name'
              name='name'
              onChange={handleChange('name')}
              required
            />
            <Label>Name</Label>
            <span />
          </Field>
          <Field>
            <Input
              type='email'
              placeholder='john@example.com'
              name='email'
              onChange={handleChange('email')}
              required
            />
            <Label>Email</Label>
            <span />
          </Field>
          <Field>
            <Textarea
              rows={5}
              placeholder='Enter your message here...'
              name='message'
              onChange={handleChange('message')}
              required
            />
            <Label>Message</Label>
            <span />
          </Field>
          <form>
            <HCaptcha
              ref={hCaptchaRef}
              sitekey={process.env.GATSBY_SITE_RECAPTCHA_KEY}
              onVerify={handleCaptchaSuccess}
              onExpire={handleCaptchaExpire}
              onError={handleCaptchaError}
              theme='dark'
            />
          </form>
          <SubmitBtn type='submit'>Send</SubmitBtn>
        </Form>
      </Container>
 </Contact>

[Johann-S]

I have the same error but only when I pass query params in my URL and with Gatsby too

[DSergiu]

I am not able to reproduce this issue. Please share a more detailed scenario and the versions of hcaptcha, gatsby etc. @abdulsamad

The error "[hCaptcha] render: invalid container 'null'". happens probably because of some sort of gatsby encapsulation of the hcaptcha dom element and document.findElementById cannot find it.

[Johann-S]

I have this error with Gatsby v2.30.3 and hcaptcha/react-hcaptcha 0.3.0

My scenario is :

• If I go directly on my register URL with a query parameter something like : /register?referralCode=123456 I have this Error

But if I come from an internal link to my register page (without query parameter) everything is fine and it doesn't work only in "build" mode but it works in "dev" mode

[abdulsamad]

I am not able to reproduce this issue. Please share a more detailed scenario and the versions of hcaptcha, gatsby etc. @abdulsamad

The error "[hCaptcha] render: invalid container 'null'". happens probably because of some sort of gatsby encapsulation of the hcaptcha dom element and document.findElementById cannot find it.

chrome - 88.0.4324.96 gatsby - 2.26.1 styled-components - 1.12.0 @hcaptcha/react-hcaptcha - 0.2.2 react & react-dom - 16.12.0 yarn - 1.22.10

[DSergiu]

Please try version 0.3.2 and let me know if it solves your issue.

npm install -S @hcaptcha/react-hcaptcha@0.3.2

@abdulsamad @Johann-S

[abdulsamad]

It's working in @hcaptcha/react-hcaptcha@0.3.2 Thank you so much @DSergiu

[Johann-S]

it's working thanks @DSergiu 👍

[DSergiu]

Super. I will close this as it seems to be resolved.