tsParticles no está definido aunque lo está

Desarrollador
1

Estoy intentando poner la animación ‘links’ de tsParticles en mi tema de Discourse.
Sin embargo, la consola dice:

theme-field-96515-common-html-script-1.js:36 Uncaught (in promise) ReferenceError: tsParticles is not defined
    at theme-field-96515-common-html-script-1.js:36:13
    at HTMLDocument.<anonymous> (theme-field-96515-common-html-script-1.js:36:13)

Pero puedes ver que en mi código, claramente está, en la parte superior.
Aquí está mi código:

<script type="text/discourse-plugin" version="1.14.0">
  var script = document.createElement('script');
  script.src = "https://cdn.jsdelivr.net/npm/@tsparticles/preset-links@3.0.2/tsparticles.preset.links.bundle.min.js";
  document.head.appendChild(script);
  const showLinks = settings.show_tsParticles_links_animation;
  if (showLinks) {
    document.addEventListener("DOMContentLoaded", function() {
      var elements = document.querySelectorAll('section#main');
      elements.forEach(function(el) {
        var wrapper = document.createElement('div');
        wrapper.className = 'wrapper';
        el.parentNode.insertBefore(wrapper, el);
        wrapper.appendChild(el);
      });
      var elements = document.querySelectorAll('div#main-outlet-wrapper');
      elements.forEach(function(el) {
        var wrapper = document.createElement('div');
        wrapper.className = 'content';
        el.parentNode.insertBefore(wrapper, el);
        wrapper.appendChild(el);
      });
      
      (async () => {
        await tsParticles.load({
          id: "tsparticles",
          options: { preset: "links" },
          background: {
            "color": {"value":"#0d47a1"}
          }
        });
      })();
    });
  }
</script>

Además, al mirar el <head> de la página, esta etiqueta está ahí.

2

Parece una condición de carrera en la que tsParticles.load() se está ejecutando antes de que el js haya terminado de cargarse.

Dado que ya estás en el elemento <head>, probablemente puedas extraer el código para crear una etiqueta de script para tsParticles y convertirla en una etiqueta de script real para que se cargue con la página en lugar de después de que la carga de la página finalice.

Si necesitas mantener la carga del script en el JS, puedes ejecutar el código en el evento load.

const script = document.createElement('script');
script.addEventListener("load", () => {
      console.log("called", tsParticles);
      initTsParticles();
  })
script.src = "https://cdn.jsdelivr.net/npm/@tsparticles/preset-links@3.0.2/tsparticles.preset.links.bundle.min.js";
document.head.appendChild(script);

function initTsParticles() {
  tsParticles.load({
    ...
  });
}
2 Me gusta
3

¡Eso funciona, muchas gracias!

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.