Strange bug when looping through elements and adding to DOM (JavaScript bugs)

[0x5am5]

The task is, create a video element on the page for each item in a collection that has the url of a video as an attribute.

Unless I'm going mental this bit of code loops through all the elements with a data-video=url on them, creates a video element, with a source using the url and adds it to the page.

When I add the HTML to the page inside the currently iterated item, it breaks with the error.

SyntaxError: Identifier 'instagramVideos' has already been declared

Link to project: https://apps.webstudio.is/builder/b851928d-a587-4b95-bdfd-24f3acf13770?authToken=23b21aa4-5071-4fe5-b7df-d07a10861586&mode=preview

  const instagramVideos = Array.from(document.querySelectorAll('[data-video]'))

  if (instagramVideos.length) {
    instagramVideos.forEach(function(item) {
      const url = item.getAttribute('data-video');
      const videoEl = document.createElement("video");
      const sourceEl = document.createElement("source");

      sourceEl.src = url;
      videoEl.controls = ''
      videoEl.muted = 'muted'
      videoEl.autoPlay = 'autoplay'
      videoEl.playsinline = 'playsinline'
      
      videoEl.appendChild(sourceEl);

      item.appendChild(videoEl)
    })
  }

[0x5am5]

Ok progress.

By selecting 'Client only' this fixes. I think overall this needs to be clearer or maybe something automatic when dom manipulation is being detected. Would be interesting to know what could be done serverside to know which is the default choice for scripts (html embeds?)

[0x5am5]

More related discoveries that trigger the same error.

I have some simple JavaScript that handles my nav button. Showing and hiding the main menu. I've got this in a HTML embed that I've copied across every page.

This works on first load but when navigating to any page, this script fails with the same error.

SyntaxError: Identifier 'menuButton' has already been declared

---

There's definitely something fruity going on with scripts and how they are loaded/handled.

One small indication is the fading in/out of the menu of my pages. It jitters. Which is normally an indication of gsap code firing a couple of times which syncs up with the "already declared" message.

Live in progress website: https://x-new-worlds-mttq5.wstd.io/

[kof]

Mostly server-side is useful for some html/css, 90% of scripts are manipulating dom. Problem is we can't know for sure.

[kof]

Once we move icons to a separate component, we could switch it over to client-only by default, so there is less situations to think about, but given icons is a super frequent use case right now, it is not clear which default is more practical.

If you think our tooltip could be better, let me know

[kof]

SyntaxError: Identifier 'menuButton' has already been declared

https://docs.webstudio.is/university/core-components/html-embed#avoid-creating-global-variables

[kof]

Maybe we could auto-set type module on scripts ...

[0x5am5]

@kof thank you. type="module" worked perfectly however I am still seeing 'jitters' in my GSAP animation. Not sure if this is related.

issue with auto type="module" is that In my HTML embed also has CSS in it. Unless you can do something at build time to add type="module".

Wording was perfect in the tooltip, it's just knowing what it's there for. Another alternative could be forcing the user to choose client or server side on creation before they are able to add code (still able to switch after the fact) or separate server HTML embed component entirely. It's a neat feature just with a few hidden quirks to use it.

[0x5am5]

@kof jittering is my bad. I had a weird easing on the animation. Doh!

[kof]

Seems like all things resolved here