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]

 

✨ Unblock PR with BitsAI

⚠️ Warnings

❌ Your PR has failed checks. Please review the issues below and take necessary action before merging.

🚦 1 Pipeline job failed

DataDog/dd-sdk-reactnative | test:lint — 🔧 Needs a code fix, caused by this PR

View more details · View in GitLab

ℹ️ Info

No other issues found (see more)

🧪 All tests passed
❄️ No new flaky tests detected

Useful? React with 👍 / 👎

_{This comment will be updated automatically if new data arrives.
🔗 Commit SHA: a1af24b | 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);
}