fix(optimizer): external resolve-import conversion

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)

playground/optimize-deps/dep-cjs-with-assets/foo.css

@@ -0,0 +1,3 @@
+.cjs-with-assets {
+  color: blue;
+}

playground/optimize-deps/dep-cjs-with-assets/index.js

@@ -0,0 +1,3 @@
+require('./foo.css')
+
+exports.a = 11

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"
+}

playground/optimize-deps/dep-esm-with-assets/foo.css

@@ -0,0 +1,3 @@
+.esm-with-assets {
+  color: blue;
+}

playground/optimize-deps/dep-esm-with-assets/index.js

@@ -0,0 +1,3 @@
+import './foo.css'
+
+export const a = 11

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"
+}

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">

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",