fix(resolve): support submodules of optional peer deps (#14489)

Author: decs

packages/vite/src/node/plugins/resolve.ts

@@ -730,9 +730,11 @@ export function tryNodeResolve(
     ) {
       const mainPkg = findNearestMainPackageData(basedir, packageCache)?.data
       if (mainPkg) {
+        const pkgName = getNpmPackageName(id)
         if (
-          mainPkg.peerDependencies?.[id] &&
-          mainPkg.peerDependenciesMeta?.[id]?.optional
+          pkgName != null &&
+          mainPkg.peerDependencies?.[pkgName] &&
+          mainPkg.peerDependenciesMeta?.[pkgName]?.optional
         ) {
           return {
             id: `${optionalPeerDepId}:${id}:${mainPkg.name}`,

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

@@ -108,6 +108,19 @@ test('dep with optional peer dep', async () => {
   }
 })
 
+test('dep with optional peer dep submodule', async () => {
+  expect(
+    await page.textContent('.dep-with-optional-peer-dep-submodule'),
+  ).toMatch(`[success]`)
+  if (isServe) {
+    expect(browserErrors.map((error) => error.message)).toEqual(
+      expect.arrayContaining([
+        'Could not resolve "foobar/baz" imported by "@vitejs/test-dep-with-optional-peer-dep-submodule". Is it installed?',
+      ]),
+    )
+  }
+})
+
 test('dep with css import', async () => {
   expect(await getColor('.dep-linked-include')).toBe('red')
 })

playground/optimize-deps/dep-with-optional-peer-dep-submodule/index.js

@@ -0,0 +1,7 @@
+export function callItself() {
+  return '[success]'
+}
+
+export async function callPeerDepSubmodule() {
+  return await import('foobar/baz')
+}

playground/optimize-deps/dep-with-optional-peer-dep-submodule/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@vitejs/test-dep-with-optional-peer-dep-submodule",
+  "private": true,
+  "version": "0.0.0",
+  "main": "index.js",
+  "type": "module",
+  "peerDependencies": {
+    "foobar": "0.0.0"
+  },
+  "peerDependenciesMeta": {
+    "foobar": {
+      "optional": true
+    }
+  }
+}

playground/optimize-deps/index.html

@@ -65,6 +65,9 @@ <h2>Import from dependency with dynamic import</h2>
 <h2>Import from dependency with optional peer dep</h2>
 <div class="dep-with-optional-peer-dep"></div>
 
+<h2>Import from dependency with optional peer dep submodule</h2>
+<div class="dep-with-optional-peer-dep-submodule"></div>
+
 <h2>Externalize known non-js files in optimize included dep</h2>
 <div class="externalize-known-non-js"></div>
 
@@ -205,6 +208,16 @@ <h2>Pre bundle css modules require</h2>
   callPeerDep()
 </script>
 
+<script type="module">
+  import {
+    callItself,
+    callPeerDepSubmodule,
+  } from '@vitejs/test-dep-with-optional-peer-dep-submodule'
+  text('.dep-with-optional-peer-dep-submodule', callItself())
+  // expect error as optional peer dep not installed
+  callPeerDepSubmodule()
+</script>
+
 <script type="module">
   // should error on builtin modules (named import)
   // no node: protocol intentionally

playground/optimize-deps/package.json

@@ -30,6 +30,7 @@
     "@vitejs/test-dep-with-builtin-module-esm": "file:./dep-with-builtin-module-esm",
     "@vitejs/test-dep-with-dynamic-import": "file:./dep-with-dynamic-import",
     "@vitejs/test-dep-with-optional-peer-dep": "file:./dep-with-optional-peer-dep",
+    "@vitejs/test-dep-with-optional-peer-dep-submodule": "file:./dep-with-optional-peer-dep-submodule",
     "@vitejs/test-dep-non-optimized": "file:./dep-non-optimized",
     "@vitejs/test-added-in-entries": "file:./added-in-entries",
     "lodash-es": "^4.17.21",