RUM-12185: Support aliased import paths for local SVG discovery

[jonathanmos]

What does this PR do?

Adds support for resolving aliased local SVG imports during Session Replay asset discovery.

Supports TypeScript/JavaScript path mappings and babel-plugin-module-resolver, including .babelrc, function-form plugin configurations, and Windows paths. Includes regression coverage for the supported configurations.

Handle alias entries in babel-plugin-module-resolver that resolve to absolute paths, not just relative ones
Detect aliased SVG imports whose specifier has no .svg extension (alias points directly at the file)
Add support for metro.config.js's resolver.extraNodeModules, matching Metro's own scoped-specifier parsing

Before

After

Motivation

What inspired you to submit this pull request?

Additional Notes

Anything else we should know when reviewing?

Review checklist (to be filled by reviewers)

• Feature or bugfix MUST have appropriate tests
• Make sure you discussed the feature or bugfix with the maintaining team in an Issue
• Make sure each commit and the PR mention the Issue number (cf the CONTRIBUTING doc)
• If this PR is auto-generated, please make sure also to manually update the code related to the change

[datadog-prod-us1-5]

✅ All CI checks and tests passed.

🎉 All green!

🧪 All tests passed
❄️ No new flaky tests detected

_{This comment will be updated automatically if new data arrives.
🔗 Commit SHA: 1bfcddc | Docs | View more details | Give us feedback!}

[Copilot]

Pull request overview

Adds support for resolving aliased local .svg imports during Session Replay asset discovery, so ReactNativeSVG.buildSvgMap() can map SVG components even when imports use TS/JS path mappings or babel-plugin-module-resolver.

Changes:

• Introduces PathAliasResolver to resolve non-relative SVG import specifiers via babel-plugin-module-resolver and tsconfig.json/jsconfig.json paths.
• Updates ReactNativeSVG.buildSvgMap() to use the resolver (and reset cached alias config between runs).
• Adds regression tests and a benchmark scenario exercising aliased SVG imports.

Reviewed changes

Copilot reviewed 7 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
yarn.lock	Adds lock entries for tsconfig-paths and babel-plugin-module-resolver (and transitive deps).
packages/react-native-babel-plugin/test/react-native-svg.test.ts	Adds coverage for alias resolution via tsconfig/jsconfig + babel-module-resolver, and precedence/fallback behavior.
packages/react-native-babel-plugin/src/libraries/react-native-svg/pathAliasResolver.ts	New resolver implementing alias lookup via Babel partial config + tsconfig-paths.
packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts	Wires alias resolution into buildSvgMap() via resolveImportSource().
packages/react-native-babel-plugin/package.json	Adds tsconfig-paths dependency and babel-plugin-module-resolver devDependency.
benchmarks/src/scenario/SessionReplay/component/Svg.tsx	Adds an aliased SVG import case (Group H) to the benchmark test screen.
benchmarks/package.json	Adds babel-plugin-module-resolver for the benchmark app.
benchmarks/babel.config.js	Configures module-resolver alias used by the benchmark aliased SVG case.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 8 out of 9 changed files in this pull request and generated 2 comments.

Suppressed comments (1)

packages/react-native-babel-plugin/src/libraries/react-native-svg/pathAliasResolver.ts:39

• isRelativePath() only matches ./ and ../ with forward slashes, so module-resolver results like src/components/icon.svg or Windows-style ..\\src\\icon.svg will be treated as non-relative and discarded, preventing alias resolution.

function isRelativePath(value: string): boolean {
    return /^\.?\.\//.test(value);
}

[Copilot]

Pull request overview

Copilot reviewed 9 out of 11 changed files in this pull request and generated 1 comment.

Suppressed comments (2)

packages/react-native-babel-plugin/src/libraries/react-native-svg/pathAliasResolver.ts:39

• isRelativePath() only matches ./... paths; it does not match ../... (or deeper) relative paths. babel-plugin-module-resolver can legally return ../... when an alias resolves outside the importing file’s directory, and the current check would incorrectly treat that as non-relative and return null (falling back to unresolved resolution).

function isRelativePath(value: string): boolean {
    return /^\.?\.\//.test(value);
}

packages/react-native-babel-plugin/src/libraries/react-native-svg/pathAliasResolver.ts:200

• parseExtraNodeModulesSpecifier() returns subpath including a leading "/". Passing that into path.join(target, subpath) causes Node to discard target (because an absolute segment resets the join), so extraNodeModules aliases like assets/icon.svg will resolve to /icon.svg instead of ${target}/icon.svg.

        const { packageName, subpath } = parseExtraNodeModulesSpecifier(
            importSource
        );
        const target = extraNodeModules[packageName];
        if (!target) {
            return null;
        }

        return subpath ? pathN.join(target, subpath) : target;

[Copilot]

Pull request overview

Copilot reviewed 9 out of 11 changed files in this pull request and generated 1 comment.

Suppressed comments (2)

packages/react-native-babel-plugin/src/libraries/react-native-svg/pathAliasResolver.ts:39

• isRelativePath() only matches sources starting with ./ (due to ^\.?\.\/), so it will incorrectly treat ../... (and Windows .\\/..\\) paths returned by babel-plugin-module-resolver as non-relative and skip resolution. That can break aliases whose replacement uses parent-directory segments.

function isRelativePath(value: string): boolean {
    return /^\.?\.\//.test(value);
}

packages/react-native-babel-plugin/src/libraries/react-native-svg/index.ts:265

• Same issue as the ImportDeclaration handler: relative/absolute re-export sources that don't end in .svg can never be resolved by PathAliasResolver, so collecting them for the second pass is unnecessary overhead.

                        const source = path.node.source?.value;
                        if (!source) {
                            return;
                        }

                        if (source.endsWith('.svg')) {
                            const resolved = this.resolveImportSource(
                                file,
                                source
                            );
                            this.populateExportedSvgNames(path, resolved);
                            return;
                        }

                        const candidateNames: string[] = [];
                        for (const spec of path.node.specifiers) {
                            if (spec.type !== 'ExportSpecifier') {
                                continue;
                            }
                            // spec.exported is the name consumers import under
                            // ('default' would be wrong for `export { default as Logo }`)
                            const exported = spec.exported;
                            const name = getNodeName(
                                this.t,
                                this.t.isStringLiteral(exported)
                                    ? exported.value
                                    : exported.name
                            );
                            if (name) {
                                candidateNames.push(name);
                            }
                        }
                        if (!candidateNames.length) {
                            return;
                        }

                        pendingBareSources.push({
                            file,
                            source,
                            candidateNames,
                            populate: resolved =>
                                this.populateExportedSvgNames(path, resolved)
                        });
                    }

[Copilot]

Pull request overview

Copilot reviewed 9 out of 11 changed files in this pull request and generated no new comments.

Suppressed comments (1)

packages/react-native-babel-plugin/src/libraries/react-native-svg/pathAliasResolver.ts:39

• isRelativePath() only recognizes ./ and ../ with forward slashes. On Windows, babel-plugin-module-resolver commonly returns relative paths using backslashes (e.g. .\\src\\... / ..\\...), which will be treated as non-relative here and make aliased imports fail to resolve on Windows.

function isRelativePath(value: string): boolean {
    return /^\.?\.\//.test(value);
}

[Copilot]

🔵 Needs a closer look

A Windows-path handling bug in PathAliasResolver can prevent module-resolver relative outputs using backslashes from being recognized and resolved correctly.

Review details

Suppressed comments (1)

packages/react-native-babel-plugin/src/libraries/react-native-svg/pathAliasResolver.ts:39

• isRelativePath() only detects POSIX-style ./ and ../ prefixes. On Windows, babel-plugin-module-resolver (or user config) can yield relative paths using backslashes (e.g. .\\src\\components\\icon.svg), which would be treated as non-relative and make alias resolution incorrectly fall back to null.

function isRelativePath(value: string): boolean {
    return /^\.?\.\//.test(value);
}

• Files reviewed: 9/11 changed files
• Comments generated: 0 new
• Review effort level: Lite

[Copilot]

Copilot review overview

🟡 Changes recommended

Unresolved alias resolution, binding propagation, cache, platform selection, shadowing, and performance issues remain.

Review effort: Lite
Findings: 1

Open (1)

• Name-only fallback can inline another file's SVG · New

Resolved since last review (3)

• Validate own string targets before joining paths
• Discover project config root separately from scan root
• Resolve SVG imports by binding, not shared identifier names

[Copilot]

Copilot review overview

🟡 Changes recommended

Unresolved critical and moderate correctness issues remain in binding fallback, platform selection, stale map state, and alias validation.

Review effort: Lite
Findings: 4 · 1

Open (5)

• Preserve flat SVG lookup without a filename · New
• Resolve platform-specific exports for the active platform · New
• Mark binding data when entries have no consumers · New
• Fall back to flat lookup when filename is absent · New
• Name-only fallback can inline another file's SVG

[Copilot]

🔵 Needs a closer look

Unresolved alias validation, export precedence, cache, and scan-performance issues can affect SVG discovery.

0 open findings

5 resolved since last review

• Fall back to flat lookup when filename is absent
• Mark binding data when entries have no consumers
• Resolve platform-specific exports for the active platform
• Preserve flat SVG lookup without a filename
• Name-only fallback can inline another file's SVG

Previously missed (5)

In code that hasn't changed since last review

Declare benchmark debugger frontend dependency explicitly

benchmarks/​package.json:55

The new benchmark aliases hardcode files under benchmarks/node_modules/@react-native/debugger-frontend, but this package is not a direct benchmark dependency. The lockfile has both 0.76.9 and 0.78.2 transitively; node-modules hoisting does not guarantee the expected 0.78.2 files at that path, so the benchmark may fail to bundle or exercise these cases. Declare @react-native/debugger-frontend at the benchmark's React Native version (0.78.2) and update the lockfile, or use an explicitly owned fixture.

Validate alias-resolved SVG targets before caching

packages/​react-native-babel-plugin/​src/​libraries/​react-native-svg/​buildSvgMap.ts:38

If an alias maps to a missing .svg file, the nonempty resolver result is stored as a valid entry here without checking the target. A module-resolver or Metro alias can yield a path even when no file exists; a later JSX transform then fails to read it and skips the SVG. Check that alias-resolved .svg targets are real files before populating the map, both for sources ending in .svg and for extensionless aliases at lines 61–62. The existing missing-path test only exercises tsconfig-paths.

Prevent wildcard exports from overriding explicit names

packages/​react-native-babel-plugin/​src/​libraries/​react-native-svg/​buildSvgMap.ts:619

Wildcard traversal also runs when this barrel has an explicit export of the same name. For export { Logo } from './nonSvg'; export * from './svgBarrel';, JavaScript selects the explicit Logo, but following the wildcard can assign the SVG to the consuming JSX binding and wrap the wrong component. Record explicit exported names (including direct SVG and deferred bare exports), and only follow a wildcard for names not explicitly exported by that barrel.

Reuse Babel bindings across equivalent configurations

packages/​react-native-babel-plugin/​src/​libraries/​react-native-svg/​pathAliasResolver.ts:540

moduleResolverBindings is keyed by filename, so loadPartialConfig() runs again for each distinct source file with a reachable bare import, even when they share the same Babel configuration. On a large React Native project this can repeatedly load the full config and plugins during one SVG scan, including for ordinary JSX component imports. Reuse the resolved binding across files whose Babel configuration is equivalent, while preserving file-specific Babel overrides and separate monorepo configs.

Invalidate legacy SVG caches before discovery

packages/​react-native-babel-plugin/​src/​libraries/​react-native-svg/​svgBindingMap.ts:82

An existing unversioned svg-map.json is accepted here and buildSvgMap() returns before rescanning. That cache was generated before aliased imports were discovered, so a build without a platform can keep missing aliased SVGs after upgrading until the asset generator rewrites the cache. Invalidate or regenerate legacy caches for discovery (and update the legacy-cache test), rather than treating them as a complete map.

🧠 Review effort: Lite

[Copilot]

🔵 Needs a closer look

The new binding graph and cache affect runtime SVG handling, and unresolved alias-resolution defects need correction and human validation.

4 open findings

• Declare debugger frontend as a direct benchmark dependency · New
• Validate aliased SVG targets before registering them · New
• Trace directory aliases through index modules and re-exports · New
• Load the explicitly selected jsconfig.json file · New

🧠 Review effort: Lite

[Copilot]

🔵 Needs a closer look

Cache failures remain unresolved, and the platform-sensitive discovery changes need final human validation.

3 open findings

• Asset CLI does not generate platform-specific SVG caches · New
• Incomplete valid caches incorrectly skip SVG rescanning · New
• Load the explicitly selected jsconfig.json file

3 resolved since last review

• Trace directory aliases through index modules and re-exports
• Validate aliased SVG targets before registering them
• Declare debugger frontend as a direct benchmark dependency

🧠 Review effort: Lite

[Copilot]

🟡 Changes recommended

Unresolved moderate and critical findings affect binding reachability, path resolution, cache handling, and benchmark isolation.

3 open issues

• Track JSX binding identity to avoid shadowed import reachability · New
• Asset CLI does not generate platform-specific SVG caches
• Load the explicitly selected jsconfig.json file

1 previously missed issue

In code that hasn't changed since last review

Override does not disable Datadog instrumentation for fixtures

benchmarks/​babel.config.js:33

Babel merges plugins from overrides with the top-level plugins array; it does not replace the top-level Datadog plugin for these files. As a result, the fixture files still run the svgTracking: true instance (or Babel reports a duplicate-plugin error), so this override cannot disable direct fixture instrumentation and the benchmark cases do not isolate alias discovery as intended. Move the enabled Datadog plugin into an override that excludes the fixture directory, rather than adding a second disabled instance.

1 resolved since last review

• Incomplete valid caches incorrectly skip SVG rescanning

_{Review effort: Lite}

[Copilot]

🔵 Needs a closer look

Unresolved SVG resolution and cache compatibility issues remain, along with unrelated Podfile.lock changes.

1 open issue

• Load the explicitly selected jsconfig.json file

2 resolved since last review

• Track JSX binding identity to avoid shadowed import reachability
• Asset CLI does not generate platform-specific SVG caches

_{Review effort: Lite}