Tengo un sitio de Gatsby al que estoy tratando de agregar un widget js de terceros, pero por alguna extraña razón, solo se cargará si actualizo la página manualmente. En la carga de la primera página, es como si no existiera en absoluto, no hay errores en las herramientas de desarrollo, nada ... pero si actualizo la página, aparece. ¿Es casi como si fuera una carga diferida? ¿Hay alguna forma de forzar la carga?
Revisé las pestañas de elements , console y network en las herramientas de desarrollo, pero no hay nada que indique ningún error. Los elements muestran las etiquetas que esperaría, console no muestra nada y network todo aparece con 200.
¿Podría ser un problema con Gatsby y/o Helmet, podría serlo, pero no creo que sea un problema con el widget en sí (es un tercero, no tengo control sobre él, consulte el último párrafo)?
<Helmet script={[ { type: 'text/javascript', src: '//widget-url.com/path/to/jsfile.min.js', }, { type: 'text/javascript', innerHTML: ` (function() { var widget = Stuff.happens.here(); widget.Initialise(); })(); `, }, ]} />En el cuerpo tengo entonces:
<div id='widget-id'></div>Cosas que he tratado de intentar entender dónde está el problema :
Como mencioné, tengo que forzar la actualización de la página donde se encuentra el widget. Si fuerzo la actualización de cualquier otra página, no ayuda. Entonces, algo que probé es: en lugar de solo incluir el JS en el encabezado de la página en cuestión, lo incluiría en TODAS las páginas. Pero esto no ha hecho ninguna diferencia.
También intenté agregar el widget a un archivo html independiente simple, el widget se carga sin problemas. ¿Lo que me lleva a pensar que probablemente no sea un problema de widget?
No sé a dónde ir desde aquí :(
El problema es que está señalando un elemento DOM que puede o no representarse en el momento en que solicita el script.
En tu caso, yo probaría:
<Helmet> <script async defer src="//widget-url.com/path/to/jsfile.min.js" /> <script async defer> {` (function() { var widget = Stuff.happens.here(); widget.Initialise(); })(); `} </script> </Helmet> O usando una de las múltiples API de representación del lado del servidor. onRenderBody debería funcionar:
// gatsby-ssr.js import React from "react" export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => { setHeadComponents([ <script src="//widget-url.com/path/to/jsfile.min.js" type="text/javascript" async />, <script dangerouslySetInnerHTML={{ __html: ` (function() { var widget = Stuff.happens.here(); widget.Initialise(); })(); `, }} />, ]) }