Error: "Cannot read properties of undefined (reading 'render')" when using `ngx-turnstile` in Angular conditional

[djgrove]

We are seeing some users of our application encounter the following TypeError on pages that use ngx-turnstile:

TypeError: Cannot read properties of undefined (reading 'render')
  at window[CALLBACK_NAME] (./node_modules/ngx-turnstile/fesm2022/ngx-turnstile.mjs:72:46)
  at NgxTurnstileComponent.createWidget (./node_modules/ngx-turnstile/fesm2022/ngx-turnstile.mjs:75:20)
  at callback (./node_modules/ngx-turnstile/fesm2022/ngx-turnstile.mjs:39:36)
  at apply (./node_modules/@angular/core/fesm2022/core.mjs:15211:9)
  at _ZoneDelegate.invoke (./node_modules/zone.js/fesm2015/zone.js:369:28)

Angular version: 17.3.12 (we definitely need to upgrade this, but we are blocked atm)
ngx-turnstile version: 0.2.4

I believe I have isolated it to instances of NgxTurnstileComponent that get rendered conditionally in a template. The intermittent nature of the error, and the line of code it is pointing to, seem to suggest this is a race condition in which the Cloudflare script has not yet loaded when the component tries to initialize.

I know a non-deterministic repro sucks, but figured I would at least file the issue so you are aware of this. It looks similar to this issue that was filed against ngx-paypal.

[djgrove]

It is baffling that the onLoadTurnstileCallback is being invoked without window.turnstile being set. I would assume that is a safe assumption...

If I do get to a point where I can repro this I'll share an isolated repro

[scottmizo]

@djgrove My guess is that the window.turnstile.render is being initiated by the scriptLoaded function. It's only checking for the element and not for the existence of window.turnstile. Your conditional render is probably rendering the component multiple times resulting in the turnstile script element being created but not fully loaded on the next rendering.

[djgrove]

Thanks for the reply! That's a good callout. It seems incredibly likely that we are triggering excess rerenders. I'll look into that.

It is definitely coming from that call invoked by scriptLoaded, this is the line it doesn't like:

this.widgetId = window.turnstile.render(this.elementRef.nativeElement, turnstileOptions);

I do wonder if it makes sense to add a check for window.turnstile in scriptLoaded()?