tryResolveBrowserEntry() — vite Function Reference

Architecture documentation for the tryResolveBrowserEntry() function in resolve.ts from the vite codebase.

Function typescript PluginSystem LegacySupport calls 2 called by 1

Entity Profile

PluginSystem→ LegacySupport→ tryResolveBrowserEntry() — vite Function Reference

Dependency Diagram

graph TD
  5a1e6eac_e85e_4779_6f3b_704e48e41b29["tryResolveBrowserEntry()"]
  dcff87b0_a8ea_57a2_3b29_a7b8f19986f3["resolve.ts"]
  5a1e6eac_e85e_4779_6f3b_704e48e41b29 -->|defined in| dcff87b0_a8ea_57a2_3b29_a7b8f19986f3
  ff420344_db87_ddaa_de80_eb7cf9a4644d["resolvePackageEntry()"]
  ff420344_db87_ddaa_de80_eb7cf9a4644d -->|calls| 5a1e6eac_e85e_4779_6f3b_704e48e41b29
  2aff86e8_0c9d_22cb_6536_c1321e1aaa1d["isObject()"]
  5a1e6eac_e85e_4779_6f3b_704e48e41b29 -->|calls| 2aff86e8_0c9d_22cb_6536_c1321e1aaa1d
  2c262e8e_4e5d_80f3_98ab_102647c58f78["tryFsResolve()"]
  5a1e6eac_e85e_4779_6f3b_704e48e41b29 -->|calls| 2c262e8e_4e5d_80f3_98ab_102647c58f78
  style 5a1e6eac_e85e_4779_6f3b_704e48e41b29 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/vite/src/node/plugins/resolve.ts lines 1111–1156

function tryResolveBrowserEntry(
  dir: string,
  data: PackageData['data'],
  options: InternalResolveOptions,
) {
  // handle edge case with browser and module field semantics

  // check browser field
  // https://github.com/defunctzombie/package-browser-field-spec
  const browserEntry =
    typeof data.browser === 'string'
      ? data.browser
      : isObject(data.browser) && data.browser['.']
  if (browserEntry) {
    // check if the package also has a "module" field.
    if (
      !options.isRequire &&
      options.mainFields.includes('module') &&
      typeof data.module === 'string' &&
      data.module !== browserEntry
    ) {
      // if both are present, we may have a problem: some package points both
      // to ESM, with "module" targeting Node.js, while some packages points
      // "module" to browser ESM and "browser" to UMD/IIFE.
      // the heuristics here is to actually read the browser entry when
      // possible and check for hints of ESM. If it is not ESM, prefer "module"
      // instead; Otherwise, assume it's ESM and use it.
      const resolvedBrowserEntry = tryFsResolve(
        path.join(dir, browserEntry),
        options,
      )
      if (resolvedBrowserEntry) {
        const content = fs.readFileSync(resolvedBrowserEntry, 'utf-8')
        if (hasESMSyntax(content)) {
          // likely ESM, prefer browser
          return browserEntry
        } else {
          // non-ESM, UMD or IIFE or CJS(!!! e.g. firebase 7.x), prefer module
          return data.module
        }
      }
    } else {
      return browserEntry
    }
  }
}