fix(optimizer): avoid error happening with a package with asset entrypoint (#21766)

Author: sapphi-red

packages/vite/src/node/optimizer/rolldownDepPlugin.ts

@@ -76,6 +76,19 @@ export function rolldownDepPlugin(
   const esmPackageCache: PackageCache = new Map()
   const cjsPackageCache: PackageCache = new Map()
 
+  const resolveAssets = (resolved: string, kind: ImportKind) => {
+    if (kind === 'require-call') {
+      // here it is not set to `external: true` to convert `require` to `import`
+      return {
+        id: externalWithConversionNamespace + resolved,
+      }
+    }
+    return {
+      id: resolved,
+      external: 'absolute' as const,
+    }
+  }
+
   // default resolver which prefers ESM
   const _resolve = createBackCompatIdResolver(environment.getTopLevelConfig(), {
     asSrc: false,
@@ -106,7 +119,7 @@ export function rolldownDepPlugin(
     return resolver(environment, id, _importer)
   }
 
-  const resolveResult = (id: string, resolved: string) => {
+  const resolveResult = (id: string, resolved: string, kind: ImportKind) => {
     if (resolved.startsWith(browserExternalId)) {
       return {
         id: browserExternalNamespace + id,
@@ -117,6 +130,9 @@ export function rolldownDepPlugin(
         id: optionalPeerDepNamespace + resolved,
       }
     }
+    if (allExternalTypesReg.test(resolved)) {
+      return resolveAssets(resolved, kind)
+    }
     if (isBuiltin(environment.config.resolve.builtins, resolved)) {
       return
     }
@@ -175,17 +191,7 @@ export function rolldownDepPlugin(
                 external: false,
               }
             }
-
-            if (kind === 'require-call') {
-              // here it is not set to `external: true` to convert `require` to `import`
-              return {
-                id: externalWithConversionNamespace + resolved,
-              }
-            }
-            return {
-              id: resolved,
-              external: 'absolute',
-            }
+            return resolveAssets(resolved, kind)
           }
         },
       },
@@ -241,7 +247,7 @@ export function rolldownDepPlugin(
           // use vite's own resolver
           const resolved = await resolve(id, importer, kind)
           if (resolved) {
-            return resolveResult(id, resolved)
+            return resolveResult(id, resolved, kind)
           }
         },
       },

playground/optimize-deps/__tests__/optimize-deps.spec.ts

@@ -166,6 +166,10 @@ test('CJS dep with css import', async () => {
   await expect.poll(() => getColor('.cjs-with-assets')).toBe('blue')
 })
 
+test('CJS dep requiring dep with css main field', async () => {
+  await expect.poll(() => getColor('.cjs-require-css-main-field')).toBe('coral')
+})
+
 test('externalize known non-js files in optimize included dep', async () => {
   await expect
     .poll(() => page.textContent('.externalize-known-non-js'))

playground/optimize-deps/dep-cjs-css-main-field/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@vitejs/test-dep-cjs-css-main-field",
+  "private": true,
+  "version": "0.0.0",
+  "main": "style.css"
+}

playground/optimize-deps/dep-cjs-css-main-field/style.css

@@ -0,0 +1,3 @@
+.cjs-require-css-main-field {
+  color: coral;
+}

playground/optimize-deps/dep-cjs-require-css-main-field/index.js

@@ -0,0 +1,2 @@
+require('@vitejs/test-dep-cjs-css-main-field')
+exports.a = 1

playground/optimize-deps/dep-cjs-require-css-main-field/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@vitejs/test-dep-cjs-require-css-main-field",
+  "private": true,
+  "version": "0.0.0",
+  "main": "index.js",
+  "dependencies": {
+    "@vitejs/test-dep-cjs-css-main-field": "file:../dep-cjs-css-main-field"
+  }
+}

playground/optimize-deps/index.html

@@ -52,6 +52,9 @@ <h2>Dep with CSS</h2>
 <h2>CJS Dep with CSS</h2>
 <div class="cjs-with-assets">This should be blue</div>
 
+<h2>CJS Dep requiring dep with CSS main field</h2>
+<div class="cjs-require-css-main-field">This should be coral</div>
+
 <h2>import * as ...</h2>
 <div class="import-star"></div>
 
@@ -170,6 +173,7 @@ <h2>Import the CommonJS external package that omits the js suffix</h2>
   }
 
   import '@vitejs/test-dep-cjs-with-assets'
+  import '@vitejs/test-dep-cjs-require-css-main-field'
   import '@vitejs/test-dep-css-require'
   import cssModuleRequire from '@vitejs/test-dep-css-require/mod.cjs'
   document

playground/optimize-deps/package.json

@@ -20,6 +20,8 @@
     "@vitejs/test-dep-cjs-with-assets": "file:./dep-cjs-with-assets",
     "@vitejs/test-dep-cjs-with-es-module-flag": "file:./dep-cjs-with-es-module-flag",
     "@vitejs/test-dep-cjs-with-external-deps": "file:./dep-cjs-with-external-deps",
+    "@vitejs/test-dep-cjs-css-main-field": "file:./dep-cjs-css-main-field",
+    "@vitejs/test-dep-cjs-require-css-main-field": "file:./dep-cjs-require-css-main-field",
     "@vitejs/test-dep-css-require": "file:./dep-css-require",
     "@vitejs/test-dep-esbuild-plugin-transform": "file:./dep-esbuild-plugin-transform",
     "@vitejs/test-dep-incompatible": "file:./dep-incompatible",