diff --git a/packages/vite/src/node/optimizer/esbuildDepPlugin.ts b/packages/vite/src/node/optimizer/esbuildDepPlugin.ts
index 0c32af75219438..78d1d5112d50d0 100644
--- a/packages/vite/src/node/optimizer/esbuildDepPlugin.ts
+++ b/packages/vite/src/node/optimizer/esbuildDepPlugin.ts
@@ -79,21 +79,47 @@ export function esbuildDepPlugin(
   return {
     name: 'vite:dep-pre-bundle',
     setup(build) {
+      const externalWithConversionNamespace =
+        'vite:dep-pre-bundle:external-conversion'
+      const convertedExternalPrefix = 'vite-dep-pre-bundle-external:'
+
       // externalize assets and commonly known non-js file types
+      // See #8459 for more details about this require-import conversion
       build.onResolve(
         {
           filter: new RegExp(`\\.(` + allExternalTypes.join('|') + `)(\\?.*)?$`)
         },
         async ({ path: id, importer, kind }) => {
+          // if the prefix exist, it is already converted to `import`, so set `external: true`
+          if (id.startsWith(convertedExternalPrefix)) {
+            return {
+              path: id.slice(convertedExternalPrefix.length),
+              external: true
+            }
+          }
+
           const resolved = await resolve(id, importer, kind)
           if (resolved) {
+            // here it is not set to `external: true` to convert `require` to `import`
             return {
               path: resolved,
-              external: true
+              namespace: externalWithConversionNamespace
             }
           }
         }
       )
+      build.onLoad(
+        { filter: /./, namespace: externalWithConversionNamespace },
+        (args) => {
+          // import itself with prefix (this is the actual part of require-import conversion)
+          return {
+            contents:
+              `export { default } from "${convertedExternalPrefix}${args.path}";` +
+              `export * from "${convertedExternalPrefix}${args.path}";`,
+            loader: 'js'
+          }
+        }
+      )
 
       function resolveEntry(id: string) {
         const flatId = flattenId(id)
diff --git a/playground/optimize-deps/dep-cjs-with-assets/foo.css b/playground/optimize-deps/dep-cjs-with-assets/foo.css
new file mode 100644
index 00000000000000..8347f9fb0c358e
--- /dev/null
+++ b/playground/optimize-deps/dep-cjs-with-assets/foo.css
@@ -0,0 +1,3 @@
+.cjs-with-assets {
+  color: blue;
+}
diff --git a/playground/optimize-deps/dep-cjs-with-assets/index.js b/playground/optimize-deps/dep-cjs-with-assets/index.js
new file mode 100644
index 00000000000000..26b296af650d88
--- /dev/null
+++ b/playground/optimize-deps/dep-cjs-with-assets/index.js
@@ -0,0 +1,3 @@
+require('./foo.css')
+
+exports.a = 11
diff --git a/playground/optimize-deps/dep-cjs-with-assets/package.json b/playground/optimize-deps/dep-cjs-with-assets/package.json
new file mode 100644
index 00000000000000..2e4f6e68c7510c
--- /dev/null
+++ b/playground/optimize-deps/dep-cjs-with-assets/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "dep-cjs-with-assets",
+  "private": true,
+  "version": "0.0.0",
+  "main": "index.js"
+}
diff --git a/playground/optimize-deps/dep-esm-with-assets/foo.css b/playground/optimize-deps/dep-esm-with-assets/foo.css
new file mode 100644
index 00000000000000..95157ddd9d348b
--- /dev/null
+++ b/playground/optimize-deps/dep-esm-with-assets/foo.css
@@ -0,0 +1,3 @@
+.esm-with-assets {
+  color: blue;
+}
diff --git a/playground/optimize-deps/dep-esm-with-assets/index.js b/playground/optimize-deps/dep-esm-with-assets/index.js
new file mode 100644
index 00000000000000..6823943a000468
--- /dev/null
+++ b/playground/optimize-deps/dep-esm-with-assets/index.js
@@ -0,0 +1,3 @@
+import './foo.css'
+
+export const a = 11
diff --git a/playground/optimize-deps/dep-esm-with-assets/package.json b/playground/optimize-deps/dep-esm-with-assets/package.json
new file mode 100644
index 00000000000000..69c6acf2be17c4
--- /dev/null
+++ b/playground/optimize-deps/dep-esm-with-assets/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "dep-esm-with-assets",
+  "type": "module",
+  "private": true,
+  "version": "0.0.0",
+  "main": "index.js"
+}
diff --git a/playground/optimize-deps/index.html b/playground/optimize-deps/index.html
index 3cd619f9ce9236..4df7a790cd4662 100644
--- a/playground/optimize-deps/index.html
+++ b/playground/optimize-deps/index.html
@@ -68,6 +68,12 @@ <h2>Alias with colon</h2>
 <h2>Reused variable names</h2>
 <div>This should show reused: <span class="reused-variable-names"></span></div>
 
+<h2>CJS Dep with assets</h2>
+<div class="cjs-with-assets">This should be blue</div>
+
+<h2>ESM Dep with assets</h2>
+<div class="esm-with-assets">This should be blue</div>
+
 <script>
   function text(el, text) {
     document.querySelector(el).textContent = text
@@ -121,6 +127,9 @@ <h2>Reused variable names</h2>
   text('.url', parse('https://vitejs.dev').hostname)
 
   import './index.astro'
+
+  import 'dep-cjs-with-assets'
+  import 'dep-esm-with-assets'
 </script>
 
 <script type="module">
diff --git a/playground/optimize-deps/package.json b/playground/optimize-deps/package.json
index 055d23bc9ce597..a802c25a58e7d9 100644
--- a/playground/optimize-deps/package.json
+++ b/playground/optimize-deps/package.json
@@ -13,7 +13,9 @@
     "clipboard": "^2.0.11",
     "dep-cjs-compiled-from-cjs": "file:./dep-cjs-compiled-from-cjs",
     "dep-cjs-compiled-from-esm": "file:./dep-cjs-compiled-from-esm",
+    "dep-cjs-with-assets": "file:./dep-cjs-with-assets",
     "dep-esbuild-plugin-transform": "file:./dep-esbuild-plugin-transform",
+    "dep-esm-with-assets": "file:./dep-esm-with-assets",
     "dep-linked": "link:./dep-linked",
     "dep-linked-include": "link:./dep-linked-include",
     "dep-node-env": "file:./dep-node-env",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index acef1fe7331aef..fd01ea48ffdd38 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -576,7 +576,9 @@ importers:
       clipboard: ^2.0.11
       dep-cjs-compiled-from-cjs: file:./dep-cjs-compiled-from-cjs
       dep-cjs-compiled-from-esm: file:./dep-cjs-compiled-from-esm
+      dep-cjs-with-assets: file:./dep-cjs-with-assets
       dep-esbuild-plugin-transform: file:./dep-esbuild-plugin-transform
+      dep-esm-with-assets: file:./dep-esm-with-assets
       dep-linked: link:./dep-linked
       dep-linked-include: link:./dep-linked-include
       dep-node-env: file:./dep-node-env
@@ -596,7 +598,9 @@ importers:
       clipboard: 2.0.11
       dep-cjs-compiled-from-cjs: file:playground/optimize-deps/dep-cjs-compiled-from-cjs
       dep-cjs-compiled-from-esm: file:playground/optimize-deps/dep-cjs-compiled-from-esm
+      dep-cjs-with-assets: file:playground/optimize-deps/dep-cjs-with-assets
       dep-esbuild-plugin-transform: file:playground/optimize-deps/dep-esbuild-plugin-transform
+      dep-esm-with-assets: file:playground/optimize-deps/dep-esm-with-assets
       dep-linked: link:dep-linked
       dep-linked-include: link:dep-linked-include
       dep-node-env: file:playground/optimize-deps/dep-node-env
@@ -620,9 +624,15 @@ importers:
   playground/optimize-deps/dep-cjs-compiled-from-esm:
     specifiers: {}
 
+  playground/optimize-deps/dep-cjs-with-assets:
+    specifiers: {}
+
   playground/optimize-deps/dep-esbuild-plugin-transform:
     specifiers: {}
 
+  playground/optimize-deps/dep-esm-with-assets:
+    specifiers: {}
+
   playground/optimize-deps/dep-linked:
     specifiers:
       lodash-es: ^4.17.21
@@ -8810,12 +8820,24 @@ packages:
     version: 0.0.0
     dev: false
 
+  file:playground/optimize-deps/dep-cjs-with-assets:
+    resolution: {directory: playground/optimize-deps/dep-cjs-with-assets, type: directory}
+    name: dep-cjs-with-assets
+    version: 0.0.0
+    dev: false
+
   file:playground/optimize-deps/dep-esbuild-plugin-transform:
     resolution: {directory: playground/optimize-deps/dep-esbuild-plugin-transform, type: directory}
     name: dep-esbuild-plugin-transform
     version: 0.0.0
     dev: false
 
+  file:playground/optimize-deps/dep-esm-with-assets:
+    resolution: {directory: playground/optimize-deps/dep-esm-with-assets, type: directory}
+    name: dep-esm-with-assets
+    version: 0.0.0
+    dev: false
+
   file:playground/optimize-deps/dep-node-env:
     resolution: {directory: playground/optimize-deps/dep-node-env, type: directory}
     name: dep-node-env