# tsParticles не определён, хотя он есть

**URL:** https://meta.discourse.org/t/tsparticles-not-defined-even-though-it-is/332311
**Category:** Development
**Created:** [23.Октябрь.2024 09:47:28 UTC](https://meta.discourse.org/t/tsparticles-not-defined-even-though-it-is/332311 "2024-10-23T09:47:28Z")
**Posts on this page:** 4
**Page:** 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: [23.Октябрь.2024 09:47:29 UTC](https://meta.discourse.org/t/tsparticles-not-defined-even-though-it-is/332311/1 "2024-10-23T09:47:29Z")

</div>

Я пытаюсь добавить анимацию «links» из tsParticles в свою тему Discourse.  
Однако в консоли выводится сообщение:

```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>` на странице этот тег там присутствует.

---

<div class="post-metadata">

### Author: ![Alteras](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alteras/32/179824_2.png) [@Alteras](https://meta.discourse.org/u/Alteras)
#### Post date: [23.Октябрь.2024 19:07:05 UTC](https://meta.discourse.org/t/tsparticles-not-defined-even-though-it-is/332311/2 "2024-10-23T19:07:05Z")

</div>

Похоже на состояние гонки, когда `tsParticles.load()` выполняется до завершения загрузки JavaScript.

Поскольку вы уже находитесь внутри элемента `<head>`, вы можете просто вынести код создания тега скрипта для tsParticles и превратить его в реальный тег `<script>`, чтобы он загружался вместе со страницей, а не после завершения загрузки страницы.

Если вам нужно оставить загрузку скрипта в JavaScript, вы можете выполнить код по событию [load](https://developer.mozilla.org/ru/docs/Web/API/Window/load_event).

```js
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({
    ...
  });
}

```

---

<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: [24.Октябрь.2024 05:41:45 UTC](https://meta.discourse.org/t/tsparticles-not-defined-even-though-it-is/332311/3 "2024-10-24T05:41:45Z")

</div>

Это работает, большое спасибо!

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [23.Ноябрь.2024 05:42:38 UTC](https://meta.discourse.org/t/tsparticles-not-defined-even-though-it-is/332311/4 "2024-11-23T05:42:38Z")

</div>

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