fix: handle resolve optional peer deps (#9321)

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

@@ -12,7 +12,7 @@ import {
   moduleListContains,
   normalizePath
 } from '../utils'
-import { browserExternalId } from '../plugins/resolve'
+import { browserExternalId, optionalPeerDepId } from '../plugins/resolve'
 import type { ExportsData } from '.'
 
 const externalWithConversionNamespace =
@@ -93,6 +93,12 @@ export function esbuildDepPlugin(
         namespace: 'browser-external'
       }
     }
+    if (resolved.startsWith(optionalPeerDepId)) {
+      return {
+        path: resolved,
+        namespace: 'optional-peer-dep'
+      }
+    }
     if (ssr && isBuiltin(resolved)) {
       return
     }
@@ -279,6 +285,22 @@ module.exports = Object.create(new Proxy({}, {
         }
       )
 
+      build.onLoad(
+        { filter: /.*/, namespace: 'optional-peer-dep' },
+        ({ path }) => {
+          if (config.isProduction) {
+            return {
+              contents: 'module.exports = {}'
+            }
+          } else {
+            const [, peerDep, parentDep] = path.split(':')
+            return {
+              contents: `throw new Error(\`Could not resolve "${peerDep}" imported by "${parentDep}". Is it installed?\`)`
+            }
+          }
+        }
+      )
+
       // yarn 2 pnp compat
       if (isRunningWithYarnPnp) {
         build.onResolve(

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

@@ -30,6 +30,7 @@ import {
   isPossibleTsOutput,
   isTsRequest,
   isWindows,
+  lookupFile,
   nestedResolveFrom,
   normalizePath,
   resolveFrom,
@@ -44,6 +45,8 @@ import { loadPackageData, resolvePackageData } from '../packages'
 // special id for paths marked with browser: false
 // https://github.com/defunctzombie/package-browser-field-spec#ignore-a-module
 export const browserExternalId = '__vite-browser-external'
+// special id for packages that are optional peer deps
+export const optionalPeerDepId = '__vite-optional-peer-dep'
 
 const isDebug = process.env.DEBUG
 const debug = createDebugger('vite:resolve-details', {
@@ -365,6 +368,14 @@ export default new Proxy({}, {
 })`
         }
       }
+      if (id.startsWith(optionalPeerDepId)) {
+        if (isProduction) {
+          return `export default {}`
+        } else {
+          const [, peerDep, parentDep] = id.split(':')
+          return `throw new Error(\`Could not resolve "${peerDep}" imported by "${parentDep}". Is it installed?\`)`
+        }
+      }
     }
   }
 }
@@ -618,6 +629,30 @@ export function tryNodeResolve(
   })!
 
   if (!pkg) {
+    // if import can't be found, check if it's an optional peer dep.
+    // if so, we can resolve to a special id that errors only when imported.
+    if (
+      basedir !== root && // root has no peer dep
+      !isBuiltin(id) &&
+      !id.includes('\0') &&
+      bareImportRE.test(id)
+    ) {
+      // find package.json with `name` as main
+      const mainPackageJson = lookupFile(basedir, ['package.json'], {
+        predicate: (content) => !!JSON.parse(content).name
+      })
+      if (mainPackageJson) {
+        const mainPkg = JSON.parse(mainPackageJson)
+        if (
+          mainPkg.peerDependencies?.[id] &&
+          mainPkg.peerDependenciesMeta?.[id]?.optional
+        ) {
+          return {
+            id: `${optionalPeerDepId}:${id}:${mainPkg.name}`
+          }
+        }
+      }
+    }
     return
   }
 

packages/vite/src/node/utils.ts

@@ -390,6 +390,7 @@ export function isDefined<T>(value: T | undefined | null): value is T {
 interface LookupFileOptions {
   pathOnly?: boolean
   rootDir?: string
+  predicate?: (file: string) => boolean
 }
 
 export function lookupFile(
@@ -400,7 +401,12 @@ export function lookupFile(
   for (const format of formats) {
     const fullPath = path.join(dir, format)
     if (fs.existsSync(fullPath) && fs.statSync(fullPath).isFile()) {
-      return options?.pathOnly ? fullPath : fs.readFileSync(fullPath, 'utf-8')
+      const result = options?.pathOnly
+        ? fullPath
+        : fs.readFileSync(fullPath, 'utf-8')
+      if (!options?.predicate || options.predicate(result)) {
+        return result
+      }
     }
   }
   const parentDir = path.dirname(dir)

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

@@ -88,6 +88,19 @@ test('dep with dynamic import', async () => {
   )
 })
 
+test('dep with optional peer dep', async () => {
+  expect(await page.textContent('.dep-with-optional-peer-dep')).toMatch(
+    `[success]`
+  )
+  if (isServe) {
+    expect(browserErrors.map((error) => error.message)).toEqual(
+      expect.arrayContaining([
+        'Could not resolve "foobar" imported by "dep-with-optional-peer-dep". 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/index.js

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

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

@@ -0,0 +1,15 @@
+{
+  "name": "dep-with-optional-peer-dep",
+  "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

@@ -59,6 +59,9 @@ <h2>
 <h2>Import from dependency with dynamic import</h2>
 <div class="dep-with-dynamic-import"></div>
 
+<h2>Import from dependency with optional peer dep</h2>
+<div class="dep-with-optional-peer-dep"></div>
+
 <h2>Dep w/ special file format supported via plugins</h2>
 <div class="plugin"></div>
 
@@ -152,6 +155,13 @@ <h2>Flatten Id</h2>
   text('.reused-variable-names', reusedName)
 </script>
 
+<script type="module">
+  import { callItself, callPeerDep } from 'dep-with-optional-peer-dep'
+  text('.dep-with-optional-peer-dep', callItself())
+  // expect error as optional peer dep not installed
+  callPeerDep()
+</script>
+
 <script type="module">
   // should error on builtin modules (named import)
   // no node: protocol intentionally

playground/optimize-deps/package.json

@@ -23,6 +23,7 @@
     "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",
+    "dep-with-optional-peer-dep": "file:./dep-with-optional-peer-dep",
     "added-in-entries": "file:./added-in-entries",
     "lodash-es": "^4.17.21",
     "nested-exclude": "file:./nested-exclude",