Cannot initialize Widget, Element not found

Hello,

For some reason i get the error TurnstileError: [Cloudflare Turnstile] Cannot initialize Widget, Element not found and after that TurnstileError: [Cloudflare Turnstile] Received state for an unknown widget , although i have implemented the turnstile correctly. I followed the instructions on another project using React and it worked perfectly but with typescript and lit element it just does not work. Any ideas where i can start to investigate this issue ?

Hi,

Thank you for reaching out to us. There are some things you can verify on your end. Here are some steps you can try to figure out what’s going wrong:

  1. You can check if the HTML element you’re attaching the Turnstile widget to is actually in the DOM. Since LitElement uses shadow DOM, double-check that the element’s shadow DOM is open and accessible: Working with Shadow DOM – Lit

  2. You should use the right lifecycle methods in LitElement to make sure the element is ready before you initialize Turnstile. firstUpdated or updated are good ones to use. Lifecycle – Lit

  3. Make sure all the scripts and stylesheets for Turnstile are properly loaded and imported in your project. The Turnstile script needs to be included in your HTML or loaded dynamically in your component. Cloudflare Turnstile · Cloudflare Turnstile docs

  4. You can add an error handling to catch and log any issues. This will help you see what’s going wrong.

  5. The Turnstile script must be fully loaded before you try to initialise the widget. If you’re loading the script dynamically, wait for it to load.

  6. Make sure the site key you’re using for Turnstile is correct and valid.

  7. Add console logs at different points to see what’s happening and check the state of your variables.

I hope this helps. Please let us know if you need further assistance.

1 Like

Hi,

Thank you for taking the time to reply. I am investigating further and will get back to you as soon as I reach an answer.

Thanks

Hello again,

I have fixed my issue with lit element , but I have a page which is written in javascript and is being extented from the default Template. For some reason I am getting the following error :

And this is on a normal page, but when I put the element on a dialog , no matter what it won’t render at all.

Any ideas where to go from here ?

FYI,

I have the script attahced :

const script = document.createElement('script');
script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js';
script.async = true;
document.body.appendChild(script);
const widgetContainer = document
		.querySelector('app-shell')
		.shadowRoot.querySelector('#cf-turnstile');
	console.log(turnstile);
	const WidgetId = turnstile.render(widgetContainer, {
		sitekey: '0x####################',
	});

Update :

For some reason the widget iframe has these style :

display: none;
border: none;
overflow: hidden;

And looks like this when i set display:block :
image

As mentioned on Discord, Turnstile does not work in shadow roots. Doesn’t matter if they’re closed or open.

1 Like

For anyone , who might have this issue , try using slots to avoid the shadow DOM.
That fixed my issue.

Add <slot name="a name of your choosing"></slot> wherever you need the captcha. And then render it with

render(html`
	   <div slot="a name of your choosing"></div>`,
	   pageComponent,
	   );

Feel free to leave a comment if you still had issues.