diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index 121505f566f6e9..253d61bd562614 100644
--- a/packages/vite/src/node/utils.ts
+++ b/packages/vite/src/node/utils.ts
@@ -37,7 +37,10 @@ export function unwrapId(id: string): string {
 }
 
 export const flattenId = (id: string): string =>
-  id.replace(/(\s*>\s*)/g, '__').replace(/[\/\.:]/g, '_')
+  id
+    .replace(/(\s*>\s*)/g, '__')
+    .replace(/[\/:]/g, '_')
+    .replace(/[\.]/g, '___')
 
 export const normalizeId = (id: string): string =>
   id.replace(/(\s*>\s*)/g, ' > ')
diff --git a/playground/optimize-deps/__tests__/optimize-deps.spec.ts b/playground/optimize-deps/__tests__/optimize-deps.spec.ts
index bf4fee61e4e74c..cc712fbbdc4a09 100644
--- a/playground/optimize-deps/__tests__/optimize-deps.spec.ts
+++ b/playground/optimize-deps/__tests__/optimize-deps.spec.ts
@@ -121,6 +121,11 @@ test('variable names are reused in different scripts', async () => {
   expect(await page.textContent('.reused-variable-names')).toBe('reused')
 })
 
+test('flatten id should generate correctly', async () => {
+  expect(await page.textContent('.clonedeep-slash')).toBe('clonedeep-slash')
+  expect(await page.textContent('.clonedeep-dot')).toBe('clonedeep-dot')
+})
+
 test.runIf(isServe)('error on builtin modules usage', () => {
   expect(browserLogs).toEqual(
     expect.arrayContaining([
diff --git a/playground/optimize-deps/index.html b/playground/optimize-deps/index.html
index 39d76fd83d0609..b96620902c1eca 100644
--- a/playground/optimize-deps/index.html
+++ b/playground/optimize-deps/index.html
@@ -74,6 +74,10 @@ <h2>Alias with colon</h2>
 <h2>Reused variable names</h2>
 <div>This should show reused: <span class="reused-variable-names"></span></div>
 
+<h2>Flatten Id</h2>
+<div class="clonedeep-slash"></div>
+<div class="clonedeep-dot"></div>
+
 <script>
   function text(el, text) {
     document.querySelector(el).textContent = text
@@ -169,3 +173,11 @@ <h2>Reused variable names</h2>
     read()
   }
 </script>
+
+<script type="module">
+  import cloneDeepSlash from 'lodash/cloneDeep'
+  import cloneDeepDot from 'lodash.clonedeep'
+
+  text('.clonedeep-slash', cloneDeepSlash({ name: 'clonedeep-slash' }).name)
+  text('.clonedeep-dot', cloneDeepDot({ name: 'clonedeep-dot' }).name)
+</script>
diff --git a/playground/optimize-deps/package.json b/playground/optimize-deps/package.json
index 3a274ff63b5fdf..ee07d10897133e 100644
--- a/playground/optimize-deps/package.json
+++ b/playground/optimize-deps/package.json
@@ -30,7 +30,9 @@
     "resolve-linked": "workspace:0.0.0",
     "url": "^0.11.0",
     "vue": "^3.2.37",
-    "vuex": "^4.0.2"
+    "vuex": "^4.0.2",
+    "lodash": "^4.17.21",
+    "lodash.clonedeep": "^4.5.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "workspace:*"