fix: Script with innerHTML not working on Safari (#4861)

* fix: Script with innerHTML not working on Safari

* Update cool-camels-tease.md

3 files changed, 10 insertions, 3 deletions

diff --git a/.changeset/cool-camels-tease.md b/.changeset/cool-camels-tease.md
new file mode 100644
index 000000000..5aef40a59
--- /dev/null
+++ b/.changeset/cool-camels-tease.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+use const instead of let for define:vars
diff --git a/packages/astro/src/runtime/server/render/util.ts b/packages/astro/src/runtime/server/render/util.ts
index afccf9df9..f98d44456 100644
--- a/packages/astro/src/runtime/server/render/util.ts
+++ b/packages/astro/src/runtime/server/render/util.ts
@@ -34,7 +34,9 @@ const toStyleString = (obj: Record<string, any>) =>
 export function defineScriptVars(vars: Record<any, any>) {
 	let output = '';
 	for (const [key, value] of Object.entries(vars)) {
-		output += `let ${toIdent(key)} = ${JSON.stringify(value)};\n`;
+		// Use const instead of let as let global unsupported with Safari
+		// https://stackoverflow.com/questions/29194024/cant-use-let-keyword-in-safari-javascript
+		output += `const ${toIdent(key)} = ${JSON.stringify(value)};\n`;
 	}
 	return markHTMLString(output);
 }
diff --git a/packages/astro/test/astro-directives.test.js b/packages/astro/test/astro-directives.test.js
index c2012b169..f871b2856 100644
--- a/packages/astro/test/astro-directives.test.js
+++ b/packages/astro/test/astro-directives.test.js
@@ -23,10 +23,10 @@ describe('Directives', async () => {
 			expect($(script).text().at(-1)).to.equal('}');
 			if (i < 2) {
 				// Inline defined variables
-				expect($(script).toString()).to.include('let foo = "bar"');
+				expect($(script).toString()).to.include('const foo = "bar"');
 			} else {
 				// Convert invalid keys to valid identifiers
-				expect($(script).toString()).to.include('let dashCase = "bar"');
+				expect($(script).toString()).to.include('const dashCase = "bar"');
 			}
 			i++;
 		}