I am trying to put the tsParticles ‘links’ animation in my Discourse theme. However, the Console says that: 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. (theme-field-96515-common-html-script-1.js:36:13) But you can see that in my code, it clearly is, at the top. Here is my code: 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"} } }); })(); }); } Moreover, when looking at he of the page, this tag is there.

Looks like a race condition where the tsParticles.load() is running before the js has finished loading. Since you’re already in the element, you can probably just pull out the code for making a script tag for tsParticles, and just make it an actual script tag so that it loads with the page instead of after page load finishes. If you need to keep the script load in the JS, you can run the code on the load event. 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({ ... }); }

tsParticles לא מוגדר למרות שזה קיימים

מפתח

NateDhaliwal (Nate Dhaliwal) 24 באוקטובר,‏ 2024,‏ 5:41am 3

That works, thanks so much!

נושא		תגובות	צפיות
Javascript added to theme header returns $ is not defined Development	4	228	24 ביוני,‏ 2025
Issues on loading a js asset from a Theme Component Development	18	1237	28 בספטמבר,‏ 2023
JS plugins not loading correctly Bug	9	1483	11 באוקטובר,‏ 2018
Javascript assets in a theme component Development	15	2584	7 במאי,‏ 2021
Site fails to load with js errors Product Support	5	2246	12 במרץ,‏ 2018

tsParticles לא מוגדר למרות שזה קיימים

נושאים קשורים