Hubspot forms with Next.js 13 - Unhandled Runtime Error: reCAPTCHA placeholder element must be an el

[AdamBenjamin]

Im having some difficulty solving this Error in my Next.js 13 application.

Full Error:

Unhandled Runtime Error

Error: reCAPTCHA placeholder element must be an element or id

Im am using the app router and integrating the hubspot form using an embed code. I have included the Hubspot script in a next tag in the layout.tsx file and am rendering the form using the following function:

"use client";

import { useEffect } from "react";

export function HubspotContactFrom({ data }) {
const { portalId, formId } = data;

useEffect(() => {
if (window.hbspt) {
window.hbspt.forms.create({
portalId,
formId,
region: "eu1",
target: "#hubspot-form",
});
}
}, [portalId, formId]);
return <div id="hubspot-form" />;
}

The form renders fine and seems to work okay too, hubspot is receiving data and if I inspect on both the live and the local site I can see a recaptcha token is present however on my local version I am getting this error:

Unhandled Runtime Error Error: reCAPTCHA placeholder element must be an element or id

Any help on this would be much appreciated, Ive been around the houses on this one and cant seem to find anything.

Aside from inspecting the source and console tabs in the inspector to make sure there are no errors or bad network responses I am out of ideas. The only other mention of this issue I have found has the solution of using the next-hubspot package however it would appear this is specific to previous versions of next.js and not the app router. I have tried using both the method as well as loading the script like so :

"use client";

import { useEffect } from "react";

export function HubspotContactFrom({ data }) {
  const { portalId, formId } = data;

  useEffect(() => {
    const form = document.createElement("script");
    form.src="https://js-eu1.hsforms.net/forms/embed/v2.js";
    form.id = "hubspot-embed";
    document.body.append(form);

    form.addEventListener("load", () => {
      if (window.hbspt) {
        window.hbspt.forms.create({
          portalId,
          formId,
          region: "eu1",
          target: "#hubspot-form",
        });
      }
    });
  }, [portalId, formId]);
  return <div id="hubspot-form" />;
}

Which appears to make no difference.

I have also tried using react-hubspot-forms package to na avail the issue persists.

[Jaycee_Lewis]

Hi, @AdamBenjamin 👋 Thanks for your question. I don't have direct experience with using Next.js and app-router. Let's invite a few community members to the conversation — hey @himanshurauthan @alyssamwilie @JBeatty, do you have any Next.js 13 experience you can share with @AdamBenjamin?

Thank you for taking a look! — Jaycee

[AdamBenjamin]

Hi Jaycee, Thanks for picking this up and putting the word out. Still havent made any progress. It might appear that the issue lies with the recaptcha being an iframe within an iframe but it could also be that im grasping at any old thing at this point. 

[KTomlinson · Accepted solution]

Hi Adam, I was facing this issue too. I'm now using "next-hubspot" package from npm. I return the target element once loaded is true, and it seems to be working for me now. Let me know if this also resolves the issue for you! Good luck!

[AdamBenjamin]

Great! Thank you, this does seem to work. I much prefere to use this package than the react-hubspot-from package too. Thank you. 

[FOcampo0]

Hey! I'm having the same issue, using next-hubspot also, and tried forrender the target element on "loaded", but I'm still getting the error. Does your return the JSX look something like this?
<div>

{loaded ? (

<div

id="hubspot-form-el"

className="hubspotForm"

></div>

) : null}</div>