Alpine JS carousel errors

[DGrape74]

Has anyone tried to include a custom made carousel using alpine js? I have built one that works fine outside of hubspot but when I try to add it to a hubspot page it just says index is not defined, item is not defined etc... I have deferred the script loading and have tried it in the header and footer but nothing works.

Thanks

[Dani621]

The issue likely stems from how HubSpot handles script loading and variable scope. Ensure Alpine.js initializes after the DOM is fully loaded (e.g., wrap it in a DOMContentLoaded listener). If adding it to a blog page, verify that HubSpot allows custom scripts in the blog template. Scope issues, like index or item not being defined, may occur due to sandboxing—make sure they’re declared within your Alpine.js component. If problems persist, check HubSpot’s developer docs for script integration tips.

[Jennie1]

I've run into similar issues with Alpine.js on HubSpot. Sometimes, HubSpot’s modules and inline JavaScript can conflict with Alpine’s reactivity. Here are a few things you could try:

1. Ensure Alpine.js Loads Correctly: Make sure Alpine.js is loaded after HubSpot’s JavaScript to prevent any conflicts. Try adding the script right before the closing </body> tag to be certain it loads last.

2. Scope Your Variables: HubSpot can sometimes isolate scopes, which may be why index and item aren’t recognized. Try explicitly defining these in your Alpine.js component or use Alpine’s x-init to define them when the component initializes.

3. Console Check: Check the console for any specific errors related to HubSpot or other JavaScript libraries that may be overriding Alpine’s reactivity.

For more tech resources, you can also check Spotify Premium Apk. Let me know if this helps or if you’ve found a workaround!

[DGrape74 · Accepted solution]

Thanks for the tips. I was trying to do too much with the text editor. Pulling everything out into its own module fixed the issue.