fix(optimizer): resolve relative path by Vite resolver (fixes #8704)

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

@@ -149,35 +149,35 @@ export function esbuildDepPlugin(
         }
       }
 
-      build.onResolve(
-        { filter: /^[\w@][^:]/ },
-        async ({ path: id, importer, kind }) => {
-          if (moduleListContains(config.optimizeDeps?.exclude, id)) {
-            return {
-              path: id,
-              external: true
-            }
+      build.onResolve({ filter: /./ }, async ({ path: id, importer, kind }) => {
+        if (
+          /^[\w@][^:]/.test(id) &&
+          moduleListContains(config.optimizeDeps?.exclude, id)
+        ) {
+          return {
+            path: id,
+            external: true
           }
+        }
 
-          // ensure esbuild uses our resolved entries
-          let entry: { path: string; namespace: string } | undefined
-          // if this is an entry, return entry namespace resolve result
-          if (!importer) {
-            if ((entry = resolveEntry(id))) return entry
-            // check if this is aliased to an entry - also return entry namespace
-            const aliased = await _resolve(id, undefined, true)
-            if (aliased && (entry = resolveEntry(aliased))) {
-              return entry
-            }
+        // ensure esbuild uses our resolved entries
+        let entry: { path: string; namespace: string } | undefined
+        // if this is an entry, return entry namespace resolve result
+        if (!importer) {
+          if ((entry = resolveEntry(id))) return entry
+          // check if this is aliased to an entry - also return entry namespace
+          const aliased = await _resolve(id, undefined, true)
+          if (aliased && (entry = resolveEntry(aliased))) {
+            return entry
           }
+        }
 
-          // use vite's own resolver
-          const resolved = await resolve(id, importer, kind)
-          if (resolved) {
-            return resolveResult(id, resolved)
-          }
+        // use vite's own resolver
+        const resolved = await resolve(id, importer, kind)
+        if (resolved) {
+          return resolveResult(id, resolved)
         }
-      )
+      })
 
       // For entry files, we'll read it ourselves and construct a proxy module
       // to retain the entry's raw id instead of file path so that esbuild

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

@@ -77,6 +77,10 @@ test('import from dep with .notjs files', async () => {
   expect(await page.textContent('.not-js')).toMatch(`[success]`)
 })
 
+test('Import from dependency which uses relative path which needs to be resolved by main field', async () => {
+  expect(await page.textContent('.relative-to-main')).toMatch(`[success]`)
+})
+
 test('dep with dynamic import', async () => {
   expect(await page.textContent('.dep-with-dynamic-import')).toMatch(
     `[success]`

playground/optimize-deps/dep-relative-to-main/entry.js

@@ -0,0 +1 @@
+module.exports = require('./')

playground/optimize-deps/dep-relative-to-main/lib/main.js

@@ -0,0 +1 @@
+module.exports = '[success] imported from main'

playground/optimize-deps/dep-relative-to-main/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "dep-relative-to-main",
+  "private": true,
+  "version": "1.0.0",
+  "main": "lib/main.js"
+}

playground/optimize-deps/index.html

@@ -50,6 +50,12 @@ <h2>Import from dependency with process.env.NODE_ENV</h2>
 <h2>Import from dependency with .notjs files</h2>
 <div class="not-js"></div>
 
+<h2>
+  Import from dependency which uses relative path which needs to be resolved by
+  main field
+</h2>
+<div class="relative-to-main"></div>
+
 <h2>Import from dependency with dynamic import</h2>
 <div class="dep-with-dynamic-import"></div>
 
@@ -109,6 +115,9 @@ <h2>Flatten Id</h2>
   import { notjsValue } from 'dep-not-js'
   text('.not-js', notjsValue)
 
+  import foo from 'dep-relative-to-main/entry'
+  text('.relative-to-main', foo)
+
   import { lazyFoo } from 'dep-with-dynamic-import'
   lazyFoo().then((foo) => {
     text('.dep-with-dynamic-import', foo)

playground/optimize-deps/package.json

@@ -19,6 +19,7 @@
     "dep-linked-include": "link:./dep-linked-include",
     "dep-node-env": "file:./dep-node-env",
     "dep-not-js": "file:./dep-not-js",
+    "dep-relative-to-main": "file:./dep-relative-to-main",
     "dep-with-builtin-module-cjs": "file:./dep-with-builtin-module-cjs",
     "dep-with-builtin-module-esm": "file:./dep-with-builtin-module-esm",
     "dep-with-dynamic-import": "file:./dep-with-dynamic-import",