@wix/zero-config-implementation 1.79.0 → 1.81.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { B as t, D as e, E as o, I as n, N as c, P as l, R as i, a as p, V as E, b as m, c as x, d as f, e as d, f as u, h as C, i as I, j as k, k as y, l as A, m as D, n as P, o as R, p as h, q as B, r as M, s as T, t as b, w } from "./index-CoU1WRYf.js";
+import { B as t, D as e, E as o, I as n, N as c, P as l, R as i, a as p, V as E, b as m, c as x, d as f, e as d, f as u, h as C, i as I, j as k, k as y, l as A, m as D, n as P, o as R, p as h, q as B, r as M, s as T, t as b, w } from "./index-CqoYtob0.js";
 import "react";
 export {
   t as BaseError,

package/package.json

@@ -4,7 +4,7 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "version": "1.79.0",
+  "version": "1.81.0",
   "description": "Core library for extracting component manifests from JS and CSS files",
   "type": "module",
   "main": "dist/index.js",
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@wix/builder-services-wrapper": "^1.56.0",
-    "@wix/react-component-schema": "1.7.0"
+    "@wix/react-component-schema": "1.8.0"
   },
   "devDependencies": {
     "@faker-js/faker": "^10.2.0",
@@ -82,5 +82,5 @@
       ]
     }
   },
-  "falconPackageHash": "95a755e580164c3acabbf27f3813514e4fcdb56b90214e7b830134af"
+  "falconPackageHash": "a62684e6a36b7c409927242d6d286817a3aa7b2ef5601dac8e42ab5f"
 }

package/src/__fixtures__/esm-browser-globals-entry.mjs

@@ -0,0 +1,2 @@
+export const navigatorUserAgent = navigator.userAgent
+export const elementPrototype = Element.prototype

package/src/__fixtures__/esm-browser-globals-existing-navigator-entry.mjs

@@ -0,0 +1,2 @@
+export const navigatorUserAgent = navigator.userAgent
+export const elementPrototype = Element.prototype

package/src/__fixtures__/esm-browser-globals-preservation-entry.mjs

@@ -0,0 +1,2 @@
+export const navigatorUserAgent = navigator.userAgent
+export const elementPrototype = Element.prototype

package/src/__fixtures__/esm-browser-globals-runtime-error-entry.mjs

@@ -0,0 +1,4 @@
+void navigator.userAgent
+void Element.prototype
+
+throw new Error('browser-global fixture runtime failure')

package/src/information-extractors/css/parse.test.ts

@@ -267,3 +267,61 @@ describe('resolveCssPropertyValue', () => {
     ).toBe('inline-flex')
   })
 })
+
+describe('resolveVarIdentifiers — CSS Modules @value compatibility', () => {
+  it('prepends -- to a bare var() identifier produced by CSS Modules @value substitution', () => {
+    const [colorProperty] = parseCss(`
+      .heading {
+        color: var(wst-heading-3-color);
+      }
+    `).getPropertiesForSelector('.heading')
+
+    expect(colorProperty.value).toBe('var(--wst-heading-3-color)')
+  })
+
+  it('does not modify a var() identifier that already starts with --', () => {
+    const [colorProperty] = parseCss(`
+      .heading {
+        color: var(--wst-heading-3-color);
+      }
+    `).getPropertiesForSelector('.heading')
+
+    expect(colorProperty.value).toBe('var(--wst-heading-3-color)')
+  })
+
+  it('normalizes a bare var() that has a fallback value', () => {
+    const [colorProperty] = parseCss(`
+      .heading {
+        color: var(wst-heading-3-color, #1e293b);
+      }
+    `).getPropertiesForSelector('.heading')
+
+    expect(colorProperty.value).toBe('var(--wst-heading-3-color,#1e293b)')
+  })
+
+  it('resolves a @value local alias to the real CSS custom property name', () => {
+    const [borderProperty] = parseCss(`
+      @value any-other-name: --wst-system-line-2-width;
+      .foo { border-top-width: var(any-other-name); }
+    `).getPropertiesForSelector('.foo')
+
+    expect(borderProperty.value).toBe('var(--wst-system-line-2-width)')
+  })
+
+  it('falls back to -- prefix for import-form @value names (convention: alias matches property)', () => {
+    const [colorProperty] = parseCss(`
+      @value wst-heading-3-color from "@wix/react-component-schema/theme-variables.module.css";
+      .heading { color: var(wst-heading-3-color); }
+    `).getPropertiesForSelector('.heading')
+
+    expect(colorProperty.value).toBe('var(--wst-heading-3-color)')
+  })
+
+  it('does not modify var() that appears inside a CSS string literal', () => {
+    const [contentProperty] = parseCss(`
+      .foo { content: "var(foo)"; }
+    `).getPropertiesForSelector('.foo')
+
+    expect(contentProperty.value).toBe('"var(foo)"')
+  })
+})

package/src/information-extractors/css/parse.ts

@@ -128,6 +128,8 @@ function parseAllProperties(
   try {
     const ast = parse(cssString, { parseCustomProperty: true })
 
+    const valueAliases = parseValueAliases(ast)
+
     walk(ast, {
       visit: 'Rule',
       enter(this: WalkContext, rule: Rule) {
@@ -135,7 +137,7 @@ function parseAllProperties(
           const properties: CSSProperty[] = []
           for (const child of rule.block.children) {
             if (child.type !== 'Declaration') continue
-            const extracted = extractProperty(child, varUsagesByProperty)
+            const extracted = extractProperty(child, varUsagesByProperty, valueAliases)
             if (extracted) {
               properties.push(extracted)
             }
@@ -181,13 +183,18 @@ function parseAllProperties(
  * Extracts property name, value, and var() references from a css-tree Declaration node.
  * Also records var() usages in the provided tracking map.
  */
-function extractProperty(declaration: Declaration, varUsagesByProperty: Map<string, Set<string>>): CSSProperty | null {
+function extractProperty(
+  declaration: Declaration,
+  varUsagesByProperty: Map<string, Set<string>>,
+  valueAliases: Map<string, string>,
+): CSSProperty | null {
   try {
     const name = declaration.property
-    const value = generate(declaration.value)
-    if (!name || !value) return null
+    if (!name) return null
 
-    const varRefs = extractVarNames(declaration.value)
+    const varRefs = extractVarNames(declaration.value, valueAliases)
+    const value = resolveVarIdentifiers(declaration.value, valueAliases)
+    if (!value) return null
 
     for (const varName of varRefs) {
       const usageSet = varUsagesByProperty.get(varName) ?? new Set<string>()
@@ -323,11 +330,51 @@ export function resolveCssPropertyValue(
   return resolvedPropertyValue.kind === 'resolved' ? resolvedPropertyValue.value : undefined
 }
 
+/**
+ * Parses @value local declarations (e.g. `@value alias: --real-prop;`) from the
+ * CSS AST and returns a map of alias → real CSS custom property name.
+ * Import-form @value rules (`@value foo from "module"`) are ignored — they rely
+ * on the convention that the alias name matches the custom property name.
+ */
+function parseValueAliases(cssAst: CssNode): Map<string, string> {
+  const aliases = new Map<string, string>()
+  walk(cssAst, {
+    visit: 'Atrule',
+    enter(atruleNode: Atrule) {
+      if (atruleNode.name !== 'value' || atruleNode.block !== null || !atruleNode.prelude) return
+      const preludeText = generate(atruleNode.prelude).trim()
+      const match = preludeText.match(/^([\w-]+)\s*:\s*(--[\w-]+)\s*$/)
+      if (match) aliases.set(match[1], match[2])
+    },
+  })
+  return aliases
+}
+
+/**
+ * Resolves bare var() identifiers to CSS custom property names by walking the AST.
+ * Local @value aliases (e.g. `@value alias: --real-prop`) are substituted with
+ * their real property name; unaliased identifiers get `--` prepended.
+ * Operating on the AST avoids false matches inside CSS string literals (e.g. content: "var(foo)").
+ */
+function resolveVarIdentifiers(valueNode: CssNode, valueAliases: Map<string, string>): string {
+  walk(valueNode, {
+    visit: 'Function',
+    enter(functionNode: FunctionNode) {
+      if (functionNode.name !== 'var') return
+      const firstChild = functionNode.children.first
+      if (firstChild?.type === 'Identifier' && !firstChild.name.startsWith('--')) {
+        firstChild.name = valueAliases.get(firstChild.name) ?? `--${firstChild.name}`
+      }
+    },
+  })
+  return generate(valueNode)
+}
+
 /**
  * Extracts all CSS custom property names referenced via var() by walking
  * the declaration value AST for Function nodes named "var".
  */
-function extractVarNames(valueNode: CssNode): string[] {
+function extractVarNames(valueNode: CssNode, valueAliases: Map<string, string>): string[] {
   const varNames: string[] = []
 
   walk(valueNode, {
@@ -338,7 +385,7 @@ function extractVarNames(valueNode: CssNode): string[] {
       const firstChild = functionNode.children.first
       if (firstChild && firstChild.type === 'Identifier') {
         const identName = firstChild.name
-        varNames.push(identName.startsWith('--') ? identName : `--${identName}`)
+        varNames.push(identName.startsWith('--') ? identName : (valueAliases.get(identName) ?? `--${identName}`))
       }
     },
   })

package/src/information-extractors/css/sass-adapter.test.ts

@@ -0,0 +1,137 @@
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { compileSass } from './sass-adapter'
+
+function writePackageJson(packageDir: string, content: object) {
+  writeFileSync(join(packageDir, 'package.json'), JSON.stringify(content))
+}
+
+function createPackageDir(tempDir: string, packageName: string): string {
+  const packageDir = join(tempDir, 'node_modules', packageName)
+  mkdirSync(packageDir, { recursive: true })
+  return packageDir
+}
+
+describe('compileSass — npm package importer', () => {
+  let tempDir: string
+
+  beforeEach(() => {
+    tempDir = mkdtempSync(join(tmpdir(), 'sass-adapter-test-'))
+  })
+
+  afterEach(() => {
+    rmSync(tempDir, { recursive: true, force: true })
+  })
+
+  it('resolves a simple string export entry', () => {
+    const packageDir = createPackageDir(tempDir, 'my-pkg')
+    mkdirSync(join(packageDir, 'dist'), { recursive: true })
+    writeFileSync(join(packageDir, 'dist', '_vars.scss'), '$color: red;')
+    writePackageJson(packageDir, { exports: { './vars': './dist/_vars.scss' } })
+
+    const scssFile = join(tempDir, 'test.scss')
+    writeFileSync(scssFile, '@use "my-pkg/vars" as theme; .a { color: theme.$color; }')
+
+    const result = compileSass(scssFile)
+    expect(result.isOk()).toBe(true)
+    expect(result._unsafeUnwrap()).toContain('color: red')
+  })
+
+  it('resolves a conditional object export entry via "sass" key', () => {
+    const packageDir = createPackageDir(tempDir, 'my-pkg')
+    mkdirSync(join(packageDir, 'dist'), { recursive: true })
+    writeFileSync(join(packageDir, 'dist', '_vars.scss'), '$color: blue;')
+    writePackageJson(packageDir, {
+      exports: { './vars': { sass: './dist/_vars.scss', default: './dist/vars.css' } },
+    })
+
+    const scssFile = join(tempDir, 'test.scss')
+    writeFileSync(scssFile, '@use "my-pkg/vars" as theme; .a { color: theme.$color; }')
+
+    const result = compileSass(scssFile)
+    expect(result.isOk()).toBe(true)
+    expect(result._unsafeUnwrap()).toContain('color: blue')
+  })
+
+  it('resolves a conditional object export entry via "default" key when "sass" is absent', () => {
+    const packageDir = createPackageDir(tempDir, 'my-pkg')
+    mkdirSync(join(packageDir, 'dist'), { recursive: true })
+    writeFileSync(join(packageDir, 'dist', '_vars.scss'), '$color: green;')
+    writePackageJson(packageDir, {
+      exports: { './vars': { default: './dist/_vars.scss' } },
+    })
+
+    const scssFile = join(tempDir, 'test.scss')
+    writeFileSync(scssFile, '@use "my-pkg/vars" as theme; .a { color: theme.$color; }')
+
+    const result = compileSass(scssFile)
+    expect(result.isOk()).toBe(true)
+    expect(result._unsafeUnwrap()).toContain('color: green')
+  })
+
+  it('falls back to .scss file extension when exports field has no matching entry', () => {
+    const packageDir = createPackageDir(tempDir, 'my-pkg')
+    writeFileSync(join(packageDir, 'vars.scss'), '$color: orange;')
+    writePackageJson(packageDir, { exports: { '.': './index.js' } })
+
+    const scssFile = join(tempDir, 'test.scss')
+    writeFileSync(scssFile, '@use "my-pkg/vars" as theme; .a { color: theme.$color; }')
+
+    const result = compileSass(scssFile)
+    expect(result.isOk()).toBe(true)
+    expect(result._unsafeUnwrap()).toContain('color: orange')
+  })
+
+  it('resolves a scoped package', () => {
+    const packageDir = createPackageDir(tempDir, '@scope/pkg')
+    mkdirSync(join(packageDir, 'dist'), { recursive: true })
+    writeFileSync(join(packageDir, 'dist', '_theme.scss'), '$color: purple;')
+    writePackageJson(packageDir, { exports: { './theme': './dist/_theme.scss' } })
+
+    const scssFile = join(tempDir, 'test.scss')
+    writeFileSync(scssFile, '@use "@scope/pkg/theme" as theme; .a { color: theme.$color; }')
+
+    const result = compileSass(scssFile)
+    expect(result.isOk()).toBe(true)
+    expect(result._unsafeUnwrap()).toContain('color: purple')
+  })
+
+  it('returns err for an unresolvable package import', () => {
+    const scssFile = join(tempDir, 'test.scss')
+    writeFileSync(scssFile, '@use "nonexistent-pkg/vars";')
+
+    const result = compileSass(scssFile)
+    expect(result.isErr()).toBe(true)
+  })
+
+  it('returns err for a package with invalid JSON in package.json', () => {
+    const packageDir = createPackageDir(tempDir, 'bad-pkg')
+    mkdirSync(join(packageDir, 'dist'), { recursive: true })
+    writeFileSync(join(packageDir, 'package.json'), 'not valid json {{{')
+
+    const scssFile = join(tempDir, 'test.scss')
+    writeFileSync(scssFile, '@use "bad-pkg/vars";')
+
+    const result = compileSass(scssFile)
+    expect(result.isErr()).toBe(true)
+  })
+
+  it('traverses parent directories to find node_modules', () => {
+    const packageDir = createPackageDir(tempDir, 'my-pkg')
+    mkdirSync(join(packageDir, 'dist'), { recursive: true })
+    writeFileSync(join(packageDir, 'dist', '_vars.scss'), '$color: teal;')
+    writePackageJson(packageDir, { exports: { './vars': './dist/_vars.scss' } })
+
+    // SCSS file is in a subdirectory — node_modules is in the parent (tempDir)
+    const subDir = join(tempDir, 'src', 'components')
+    mkdirSync(subDir, { recursive: true })
+    const scssFile = join(subDir, 'test.scss')
+    writeFileSync(scssFile, '@use "my-pkg/vars" as theme; .a { color: theme.$color; }')
+
+    const result = compileSass(scssFile)
+    expect(result.isOk()).toBe(true)
+    expect(result._unsafeUnwrap()).toContain('color: teal')
+  })
+})

package/src/information-extractors/css/sass-adapter.ts

@@ -1,6 +1,7 @@
-import { existsSync } from 'node:fs'
+import { existsSync, readFileSync } from 'node:fs'
 import { createRequire } from 'node:module'
 import { dirname, join } from 'node:path'
+import { pathToFileURL } from 'node:url'
 import { Result, err } from 'neverthrow'
 
 function collectNodeModulesPaths(filePath: string): string[] {
@@ -16,6 +17,62 @@ function collectNodeModulesPaths(filePath: string): string[] {
   return paths
 }
 
+function resolvePackageExport(packageDir: string, subPath: string): string | null {
+  const packageJsonPath = join(packageDir, 'package.json')
+  if (!existsSync(packageJsonPath)) return null
+  let packageJson: { exports?: Record<string, string | Record<string, string>> }
+  try {
+    packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'))
+  } catch (error) {
+    console.error(`Failed to parse ${packageJsonPath}:`, error)
+    return null
+  }
+  const exportEntry = packageJson.exports?.[subPath]
+  let exportPath: string | undefined
+  if (typeof exportEntry === 'string') {
+    exportPath = exportEntry
+  } else if (typeof exportEntry === 'object' && exportEntry !== null) {
+    exportPath = exportEntry.sass ?? exportEntry.default
+  }
+  if (typeof exportPath === 'string') {
+    const resolvedPath = join(packageDir, exportPath)
+    return existsSync(resolvedPath) ? resolvedPath : null
+  }
+  return null
+}
+
+function createNodePackageImporter(startDir: string) {
+  return {
+    findFileUrl(url: string): URL | null {
+      if (url.startsWith('.') || url.startsWith('/')) return null
+
+      const isScoped = url.startsWith('@')
+      const parts = url.split('/')
+      const packageName = isScoped ? `${parts[0]}/${parts[1]}` : parts[0]
+      const subpathParts = isScoped ? parts.slice(2) : parts.slice(1)
+      const subPath = subpathParts.length > 0 ? `./${subpathParts.join('/')}` : '.'
+
+      let dir = startDir
+      while (true) {
+        const packageDir = join(dir, 'node_modules', packageName)
+        if (existsSync(packageDir)) {
+          const resolvedPath = resolvePackageExport(packageDir, subPath)
+          if (resolvedPath) return pathToFileURL(resolvedPath)
+
+          if (subpathParts.length > 0) {
+            const fallback = join(packageDir, `${subpathParts.join('/')}.scss`)
+            if (existsSync(fallback)) return pathToFileURL(fallback)
+          }
+        }
+        const parent = dirname(dir)
+        if (parent === dir) break
+        dir = parent
+      }
+      return null
+    },
+  }
+}
+
 const require = createRequire(import.meta.url)
 
 export function compileSass(filePath: string): Result<string, Error> {
@@ -34,6 +91,7 @@ export function compileSass(filePath: string): Result<string, Error> {
     () =>
       sass.compile(filePath, {
         loadPaths,
+        importers: [createNodePackageImporter(dirname(filePath))],
       }).css,
     (thrown) => (thrown instanceof Error ? thrown : new Error(String(thrown))),
   )()

package/src/module-loader.test.ts

@@ -8,7 +8,170 @@ import { readLoaderPortRefStateForTests, readRegisteredRefElementModuleUrlsForTe
 
 const require = createRequire(import.meta.url)
 
+const extractionGlobalPropertyNames = [
+  'window',
+  'document',
+  'HTMLElement',
+  'Element',
+  'navigator',
+  'customElements',
+  'IntersectionObserver',
+  'React',
+  'ReactDOM',
+] as const
+
+type ExtractionGlobalPropertyName = (typeof extractionGlobalPropertyNames)[number]
+
+function snapshotExtractionGlobalDescriptors(): Map<ExtractionGlobalPropertyName, PropertyDescriptor | undefined> {
+  return new Map(
+    extractionGlobalPropertyNames.map((propertyName) => [
+      propertyName,
+      Object.getOwnPropertyDescriptor(globalThis, propertyName),
+    ]),
+  )
+}
+
+function clearExtractionGlobals(): void {
+  for (const propertyName of extractionGlobalPropertyNames) {
+    Reflect.deleteProperty(globalThis, propertyName)
+  }
+}
+
+function restoreExtractionGlobalDescriptors(
+  originalDescriptors: Map<ExtractionGlobalPropertyName, PropertyDescriptor | undefined>,
+): void {
+  clearExtractionGlobals()
+  for (const [propertyName, propertyDescriptor] of originalDescriptors) {
+    if (propertyDescriptor !== undefined) {
+      Object.defineProperty(globalThis, propertyName, propertyDescriptor)
+    }
+  }
+}
+
 describe('module loading', () => {
+  it('loads an ESM entry that reads navigator and Element during module evaluation', async () => {
+    const originalDescriptors = snapshotExtractionGlobalDescriptors()
+    clearExtractionGlobals()
+
+    try {
+      const entryPath = path.resolve(__dirname, '__fixtures__/esm-browser-globals-entry.mjs')
+      const loadedModuleResult = await loadModuleForExtraction(entryPath)
+      const loadedModule = loadedModuleResult._unsafeUnwrap()
+      const globals = globalThis as Record<string, unknown>
+      const configuredWindow = globals.window as Record<string, unknown>
+
+      expect(loadedModule.moduleExports.navigatorUserAgent).toBe(
+        (configuredWindow.navigator as { userAgent: string }).userAgent,
+      )
+      expect(loadedModule.moduleExports.elementPrototype).toBe(
+        (configuredWindow.Element as { prototype: unknown }).prototype,
+      )
+      expect(globals.navigator).toBe(configuredWindow.navigator)
+      expect(globals.Element).toBe(configuredWindow.Element)
+
+      await loadedModule.cleanup()
+    } finally {
+      restoreExtractionGlobalDescriptors(originalDescriptors)
+    }
+  })
+
+  it('preserves caller-provided navigator and Element globals', async () => {
+    const originalDescriptors = snapshotExtractionGlobalDescriptors()
+    clearExtractionGlobals()
+
+    const callerNavigator = { userAgent: 'caller-provided navigator' }
+    class CallerProvidedElement {}
+
+    try {
+      Object.defineProperty(globalThis, 'navigator', {
+        configurable: true,
+        value: callerNavigator,
+        writable: true,
+      })
+      Object.defineProperty(globalThis, 'Element', {
+        configurable: true,
+        value: CallerProvidedElement,
+        writable: true,
+      })
+
+      const entryPath = path.resolve(__dirname, '__fixtures__/esm-browser-globals-preservation-entry.mjs')
+      const loadedModuleResult = await loadModuleForExtraction(entryPath)
+      const loadedModule = loadedModuleResult._unsafeUnwrap()
+      const globals = globalThis as Record<string, unknown>
+
+      expect(globals.navigator).toBe(callerNavigator)
+      expect(globals.Element).toBe(CallerProvidedElement)
+      expect(loadedModule.moduleExports.elementPrototype).toBe(CallerProvidedElement.prototype)
+
+      await loadedModule.cleanup()
+    } finally {
+      restoreExtractionGlobalDescriptors(originalDescriptors)
+    }
+  })
+
+  it('preserves an existing navigator while adding a missing Element global', async () => {
+    const originalDescriptors = snapshotExtractionGlobalDescriptors()
+    clearExtractionGlobals()
+
+    const existingNavigator = { userAgent: 'existing Node navigator' }
+
+    try {
+      Object.defineProperty(globalThis, 'navigator', {
+        configurable: true,
+        value: existingNavigator,
+        writable: true,
+      })
+
+      const entryPath = path.resolve(__dirname, '__fixtures__/esm-browser-globals-existing-navigator-entry.mjs')
+      const loadedModuleResult = await loadModuleForExtraction(entryPath)
+      const loadedModule = loadedModuleResult._unsafeUnwrap()
+      const globals = globalThis as Record<string, unknown>
+      const configuredWindow = globals.window as Record<string, unknown>
+
+      expect(loadedModule.moduleExports.navigatorUserAgent).toBe(existingNavigator.userAgent)
+      expect(loadedModule.moduleExports.elementPrototype).toBe(
+        (configuredWindow.Element as { prototype: unknown }).prototype,
+      )
+      expect(globals.navigator).toBe(existingNavigator)
+      expect(globals.Element).toBe(configuredWindow.Element)
+
+      await loadedModule.cleanup()
+    } finally {
+      restoreExtractionGlobalDescriptors(originalDescriptors)
+    }
+  })
+
+  it('keeps unrelated module-evaluation failures visible after browser-global setup', async () => {
+    const originalDescriptors = snapshotExtractionGlobalDescriptors()
+    clearExtractionGlobals()
+
+    const callerNavigator = { userAgent: 'caller-provided navigator' }
+    class CallerProvidedElement {}
+
+    try {
+      Object.defineProperty(globalThis, 'navigator', {
+        configurable: true,
+        value: callerNavigator,
+        writable: true,
+      })
+      Object.defineProperty(globalThis, 'Element', {
+        configurable: true,
+        value: CallerProvidedElement,
+        writable: true,
+      })
+
+      const entryPath = path.resolve(__dirname, '__fixtures__/esm-browser-globals-runtime-error-entry.mjs')
+      const loadedModuleResult = await loadModuleForExtraction(entryPath)
+
+      expect(loadedModuleResult.isErr()).toBe(true)
+      if (loadedModuleResult.isErr()) {
+        expect(loadedModuleResult.error.esmError?.message).toContain('browser-global fixture runtime failure')
+      }
+    } finally {
+      restoreExtractionGlobalDescriptors(originalDescriptors)
+    }
+  })
+
   it('temporarily tags ref-element modules in the CJS fallback and cleans them up afterwards', async () => {
     const entryPath = path.resolve(__dirname, '__fixtures__/cjs-ref-element-entry.cjs')
     const targetPath = path.resolve(__dirname, '__fixtures__/cjs-ref-element-target.cjs')

package/src/module-loader.ts

@@ -44,6 +44,8 @@ function setupWindowGlobals(): void {
   }
 
   const windowObj = globals.window as Record<string, unknown>
+  if (globals.navigator === undefined) globals.navigator = windowObj.navigator
+  if (globals.Element === undefined) globals.Element = windowObj.Element
   const intersectionObserver = windowObj.IntersectionObserver ?? NoopIntersectionObserver
   if (globals.IntersectionObserver === undefined) globals.IntersectionObserver = intersectionObserver
   if (windowObj.IntersectionObserver === undefined) windowObj.IntersectionObserver = intersectionObserver