diff --git a/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts b/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts
index f3ae6e8147b0f4..174dc77c81aaf3 100644
--- a/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts
+++ b/packages/playground/optimize-deps/__tests__/optimize-deps.spec.ts
@@ -91,3 +91,7 @@ test('import optimize-excluded package that imports optimized-included package',
 test('import aliased package with colon', async () => {
   expect(await page.textContent('.url')).toBe('vitejs.dev')
 })
+
+test('variable names are reused in different scripts', async () => {
+  expect(await page.textContent('.reused-variable-names')).toBe('reused')
+})
diff --git a/packages/playground/optimize-deps/index.html b/packages/playground/optimize-deps/index.html
index 8451d968d2745b..65b6bf1dcf5473 100644
--- a/packages/playground/optimize-deps/index.html
+++ b/packages/playground/optimize-deps/index.html
@@ -56,6 +56,15 @@ <h2>Nested include</h2>
 <h2>Alias with colon</h2>
 <div>URL: <span class="url"></span></div>
 
+<h2>Reused variable names</h2>
+<div>This should show reused: <span class="reused-variable-names"></span></div>
+
+<script>
+  function text(el, text) {
+    document.querySelector(el).textContent = text
+  }
+</script>
+
 <script type="module">
   // test dep detection in globbed files
   const globbed = import.meta.globEager('./glob/*.js')
@@ -90,8 +99,12 @@ <h2>Alias with colon</h2>
 
   import { parse } from 'node:url'
   text('.url', parse('https://vitejs.dev').hostname)
+</script>
 
-  function text(el, text) {
-    document.querySelector(el).textContent = text
-  }
+<script type="module">
+  const reusedName = 1
+</script>
+<script type="module">
+  const reusedName = 'reused'
+  text('.reused-variable-names', reusedName)
 </script>
diff --git a/packages/vite/src/node/optimizer/scan.ts b/packages/vite/src/node/optimizer/scan.ts
index 280776b2e7d38d..5532294de11edd 100644
--- a/packages/vite/src/node/optimizer/scan.ts
+++ b/packages/vite/src/node/optimizer/scan.ts
@@ -35,8 +35,6 @@ const debug = createDebugger('vite:deps')
 
 const htmlTypesRE = /\.(html|vue|svelte|astro)$/
 
-const setupRE = /<script\s+setup/
-
 // A simple regex to detect import sources. This is only used on
 // <script lang="ts"> blocks in vue (setup only) or svelte files, since
 // seemingly unused imports are dropped by esbuild when transpiling TS which
@@ -149,7 +147,6 @@ export const commentRE = /<!--(.|[\r\n])*?-->/
 const srcRE = /\bsrc\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s'">]+))/im
 const typeRE = /\btype\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s'">]+))/im
 const langRE = /\blang\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s'">]+))/im
-const contextRE = /\bcontext\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s'">]+))/im
 
 function esbuildScanPlugin(
   config: ResolvedConfig,
@@ -189,7 +186,7 @@ function esbuildScanPlugin(
   return {
     name: 'vite:dep-scan',
     setup(build) {
-      const localScripts: Record<string, OnLoadResult> = {}
+      const scripts: Record<string, OnLoadResult> = {}
 
       // external urls
       build.onResolve({ filter: externalRE }, ({ path }) => ({
@@ -208,12 +205,12 @@ function esbuildScanPlugin(
         return {
           // strip prefix to get valid filesystem path so esbuild can resolve imports in the file
           path: path.replace(virtualModulePrefix, ''),
-          namespace: 'local-script'
+          namespace: 'script'
         }
       })
 
-      build.onLoad({ filter: /.*/, namespace: 'local-script' }, ({ path }) => {
-        return localScripts[path]
+      build.onLoad({ filter: /.*/, namespace: 'script' }, ({ path }) => {
+        return scripts[path]
       })
 
       // html types: extract script contents -----------------------------------
@@ -235,7 +232,7 @@ function esbuildScanPlugin(
           const regex = isHtml ? scriptModuleRE : scriptRE
           regex.lastIndex = 0
           let js = ''
-          let loader: Loader = 'js'
+          let scriptId = 0
           let match: RegExpExecArray | null
           while ((match = regex.exec(raw))) {
             const [, openTag, content] = match
@@ -256,6 +253,7 @@ function esbuildScanPlugin(
             ) {
               continue
             }
+            let loader: Loader = 'js'
             if (lang === 'ts' || lang === 'tsx' || lang === 'jsx') {
               loader = lang
             }
@@ -264,37 +262,40 @@ function esbuildScanPlugin(
               const src = srcMatch[1] || srcMatch[2] || srcMatch[3]
               js += `import ${JSON.stringify(src)}\n`
             } else if (content.trim()) {
-              // There can be module scripts (`<script context="module">` in Svelte and `<script>` in Vue)
+              // The reason why virtual modules are needed:
+              // 1. There can be module scripts (`<script context="module">` in Svelte and `<script>` in Vue)
               // or local scripts (`<script>` in Svelte and `<script setup>` in Vue)
+              // 2. There can be multiple module scripts in html
               // We need to handle these separately in case variable names are reused between them
-              const contextMatch = openTag.match(contextRE)
-              const context =
-                contextMatch &&
-                (contextMatch[1] || contextMatch[2] || contextMatch[3])
-              if (
-                (path.endsWith('.vue') && setupRE.test(openTag)) ||
-                (path.endsWith('.svelte') && context !== 'module')
-              ) {
-                // append imports in TS to prevent esbuild from removing them
-                // since they may be used in the template
-                const localContent =
-                  content +
-                  (loader.startsWith('ts') ? extractImportPaths(content) : '')
-                localScripts[path] = {
-                  loader,
-                  contents: localContent
+
+              // append imports in TS to prevent esbuild from removing them
+              // since they may be used in the template
+              const contents =
+                content +
+                (loader.startsWith('ts') ? extractImportPaths(content) : '')
+
+              const key = `${path}?id=${scriptId++}`
+
+              if (contents.includes('import.meta.glob')) {
+                scripts[key] = {
+                  // transformGlob already transforms to js
+                  loader: 'js',
+                  contents: await transformGlob(
+                    contents,
+                    path,
+                    config.root,
+                    loader
+                  )
                 }
-                js += `import ${JSON.stringify(virtualModulePrefix + path)}\n`
               } else {
-                js += content + '\n'
+                scripts[key] = {
+                  loader,
+                  contents
+                }
               }
-            }
-          }
 
-          // `<script>` in Svelte has imports that can be used in the template
-          // so we handle them here too
-          if (loader.startsWith('ts') && path.endsWith('.svelte')) {
-            js += extractImportPaths(js)
+              js += `import ${JSON.stringify(virtualModulePrefix + key)}\n`
+            }
           }
 
           // This will trigger incorrectly if `export default` is contained
@@ -305,16 +306,8 @@ function esbuildScanPlugin(
             js += '\nexport default {}'
           }
 
-          if (js.includes('import.meta.glob')) {
-            return {
-              // transformGlob already transforms to js
-              loader: 'js',
-              contents: await transformGlob(js, path, config.root, loader)
-            }
-          }
-
           return {
-            loader,
+            loader: 'js',
             contents: js
           }
         }