tsParticles não definido, mesmo assim está

Dev
1

Estou tentando colocar a animação ‘links’ do tsParticles no meu tema Discourse.
No entanto, o Console diz que:

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)

Mas você pode ver que no meu código, ele claramente está, no topo.
Aqui está o meu 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>

Além disso, ao olhar o <head> da página, esta tag está lá.

2

Parece uma condição de corrida onde tsParticles.load() está sendo executado antes que o js termine de carregar.

Como você já está no elemento <head>, você pode simplesmente extrair o código para criar uma tag de script para tsParticles e transformá-la em uma tag de script real para que ela carregue com a página em vez de depois que o carregamento da página terminar.

Se você precisar manter o carregamento do script no JS, você pode executar o código no evento load.

const script = document.createElement('script');
script.addEventListener("load", () => {
      console.log("chamado", 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 curtidas
3

Isso funciona, muito obrigado!

4

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