# tsParticles が定義されていないのに、定義されている

**URL:** <https://meta.discourse.org/t/tsparticles-not-defined-even-though-it-is/332311>\
**Category:** Development\
**Created:** [2024 年 10 月 23 日午前 9:47 UTC](https://meta.discourse.org/t/tsparticles-not-defined-even-though-it-is/332311 "2024-10-23T09:47:28Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)\
**Post date:** [2024 年 10 月 23 日午前 9:47 UTC](https://meta.discourse.org/t/tsparticles-not-defined-even-though-it-is/332311/1 "2024-10-23T09:47:29Z")

</div>

Discourse テーマに tsParticles の「links」アニメーションを適用しようとしています。  
しかし、コンソールに次のようなエラーが表示されます。

```plaintext
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)

```

しかし、コードの先頭で明確に定義されているのが確認できます。  
以下が私のコードです。

```html
<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>` を見ると、このタグが存在します。

---

_[View the full topic](https://meta.discourse.org/t/tsparticles-not-defined-even-though-it-is/332311)._
