<script> tags behave differently in htmx 1.5 and htmx 1.6.1

[formoxyz]

Hello,

I am trying to build a file upload component using dropzone.js

My code is below (details removed for brevity)

<div id={"b_#{@block.id}"} class="mt-8 group relative">
  <div id={"be_#{@block.id}"} class="relative">
    <div class="mt-4">
			<div id={"fdz_#{@block.id}"} class="file-upload-box">
				<div id={"fdz_init_message_#{@block.id}"} class="text-2xl font-medium text-gray-400">Click or drop files here</div>
			</div>
			<script type="text/javascript">
				//***** The line below gives error when more than one component is in the page ******//
				let fdz = document.getElementById("fdz_<%= @block.id %>")
				//More code implementing dropzone js
			</script>
		</div>
  </div>
</div>

The code works fine when i have just one such component in the page.
However when I have more than one such component I get the error -
Uncaught SyntaxError: redeclaration of let fdz

Same code used to work correctly with htmx v 1.5.0, but is giving error with htmx v 1.6.1.

Please advise.

Thanks.

[1cg]

Yes, script tags are now evaluated the "normal" way, that is the way that they would be interpreted if you have them in a regular web page, so variables at the top level will be global.

To deal with this you need to introduce a new scope, for example by wrapping everything in a function:

  (function(){
    //***** The line below gives error when more than one component is in the page ******//
    let fdz = document.getElementById("fdz_<%= @block.id %>")
    //More code implementing dropzone js
   )()

This wraps all the code in a function and then invokes the function, shielding the top level scope from your variables.

[formoxyz]

Great. It works! Thank you so much.