tsParticles가 정의되어 있는데도 '정의되지 않음' 오류가 발생합니다

개발
1

tsParticles의 ‘links’ 애니메이션을 Discourse 테마에 적용하려고 합니다.
하지만 콘솔에는 다음과 같은 메시지가 표시됩니다:

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)

하지만 제 코드 상단에는 명확히 정의되어 있습니다.
제 코드는 다음과 같습니다:

<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>

게다가 페이지의 <head>를 살펴보면 해당 태그가 존재하는 것을 확인할 수 있습니다.

2

JS 로딩이 완료되기 전에 tsParticles.load()가 실행되는 경합 조건(race condition)으로 보입니다.

이미 <head> 요소 안에 있으므로, tsParticles를 위한 스크립트 태그를 생성하는 코드를 빼내서 실제 스크립트 태그로 만들어 페이지 로드 후가 아니라 페이지와 함께 로드되도록 하면 됩니다.

JS에서 스크립트 로딩을 유지해야 한다면, 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({
    ...
  });
}
3

잘 작동하네요, 정말 감사합니다!