APIs & Integrations

AdamBenjamin
Mitglied

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

lösung

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.

1 Akzeptierte Lösung
KTomlinson
Lösung
Teilnehmer/-in

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

lösung

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!

Lösung in ursprünglichem Beitrag anzeigen

0 Upvotes
4 Antworten
Jaycee_Lewis
Community-Manager/-in
Community-Manager/-in

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

lösung

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

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes
AdamBenjamin
Mitglied

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

lösung

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. 

0 Upvotes
KTomlinson
Lösung
Teilnehmer/-in

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

lösung

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!

0 Upvotes
AdamBenjamin
Mitglied

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

lösung

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

0 Upvotes