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 not defined even though it is

Development

NateDhaliwal (Nate Dhaliwal) October 24, 2024, 5:41am 3

That works, thanks so much!

Topic		Replies	Views
Javascript added to theme header returns $ is not defined Development	4	227	June 24, 2025
Issues on loading a js asset from a Theme Component Development	18	1232	September 28, 2023
JS plugins not loading correctly Bug	9	1483	October 11, 2018
Javascript assets in a theme component Development	15	2576	May 7, 2021
Site fails to load with js errors Product Support	5	2245	March 12, 2018

tsParticles not defined even though it is

Related topics