fix(rspeedy/react): resolve @lynx-js/react/* from rootPath

[colinaaa]

Summary by CodeRabbit

• Bug Fixes

  • Addressed an error related to the package subpath './compat' not being defined in the exports field.

• Refactor

  • Improved how module paths are resolved for Preact-related aliases, separating their resolution context from the main React resolver.

• Tests

  • Updated tests to explicitly set the current working directory for build configuration, improving test reliability and consistency.
  • Replaced build tool instances in tests with a stub implementation to streamline test setup.
  • Simplified loader presence assertions and updated plugin presence checks in test suites.
  • Adjusted test configurations and expectations for SWC and plugin usage.

Checklist

• Tests updated (or not required).
• Documentation updated (or not required).
• Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).

[changeset-bot]

🦋 Changeset detected

Latest commit: 9e4a0ae

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@lynx-js/react-alias-rsbuild-plugin	Patch
@lynx-js/react-rsbuild-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

📝 Walkthrough

Walkthrough

This update refactors module resolution logic in the plugin-react-alias package, introduces a dedicated resolver for Preact-related aliases, and updates test files to explicitly set the working directory using Node.js path utilities. It also replaces direct imports of createRsbuild with a stubbed createRspeedy in multiple test suites and adds a new test utility function to support this. Additionally, a changeset is added to document a patch for the @lynx-js/react-alias-rsbuild-plugin package.

Changes

Cohort / File(s)	Change Summary
Changeset Documentation .changeset/plain-ideas-care.md	Adds a changeset file describing a patch for the @lynx-js/react-alias-rsbuild-plugin package to address an export subpath error.
Module Resolution Refactor packages/rspeedy/plugin-react-alias/src/index.ts	Refactors how the React package version is imported, introduces a separate lazy resolver for Preact aliases, and adjusts resolver base directories.
Test Working Directory Context Update packages/rspeedy/plugin-react-alias/test/compat/legacy.canary.test.ts, .../legacy.test.ts, .../next.canary.test.ts, .../next.test.ts, .../include.test.ts, .../index.test.ts	Updates tests to import Node.js path utilities and explicitly set the current working directory (cwd) in createRsbuild calls for consistent test execution context.
Test Stub Rspeedy Integration packages/rspeedy/plugin-react/test/background-only.test.ts, basic.test.ts, config.test.ts, css.test.ts, generator.test.ts, lazy.test.ts, refresh.test.ts, swc-config.test.ts, web.test.ts, test/createRspeedy.ts	Replaces imports of createRsbuild with a locally defined stub createStubRspeedy (aliased as createRspeedy), updates configuration keys from rsbuildConfig to rspeedyConfig, and adjusts test assertions accordingly. Adds a new utility function createStubRspeedy to facilitate this.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat: introduce @lynx-js/react/compat #1316: Adds an alias patch for @lynx-js/react/compat in the plugin-react-alias package, directly relating to the handling and resolution of the @lynx-js/react/compat module.

Suggested reviewers

• gaoachao
• hzy

Poem

A bunny hopped through code so neat,
Setting paths beneath its feet.
With resolvers split for React and friend,
And tests that know just where they wend.
Stubs in place, the builds now play,
Patching exports, clearing the way! 🐇✨

Note

🔌 MCP (Model Context Protocol) integration is now available in Early Access!

Pro users can now connect to remote MCP servers under the Integrations page to get reviews and chat conversations that understand additional development context.

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 207c530 and 9e4a0ae.

📒 Files selected for processing (10)

• packages/rspeedy/plugin-react/test/background-only.test.ts (1 hunks)
• packages/rspeedy/plugin-react/test/basic.test.ts (1 hunks)
• packages/rspeedy/plugin-react/test/config.test.ts (45 hunks)
• packages/rspeedy/plugin-react/test/createRspeedy.ts (1 hunks)
• packages/rspeedy/plugin-react/test/css.test.ts (19 hunks)
• packages/rspeedy/plugin-react/test/generator.test.ts (2 hunks)
• packages/rspeedy/plugin-react/test/lazy.test.ts (2 hunks)
• packages/rspeedy/plugin-react/test/refresh.test.ts (3 hunks)
• packages/rspeedy/plugin-react/test/swc-config.test.ts (10 hunks)
• packages/rspeedy/plugin-react/test/web.test.ts (6 hunks)

🧰 Additional context used

🧠 Learnings (7)

📓 Common learnings

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1453
File: vitest.config.ts:49-61
Timestamp: 2025-08-06T13:28:57.139Z
Learning: In the lynx-family/lynx-stack repository, the file `packages/rspeedy/create-rspeedy/template-react-vitest-rltl-js/vitest.config.js` is a template file for scaffolding new Rspeedy projects, not a test configuration that should be included in the main vitest projects array.

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1454
File: pnpm-workspace.yaml:46-46
Timestamp: 2025-08-07T04:00:59.627Z
Learning: In the lynx-family/lynx-stack repository, the webpack patch (patches/webpack5.101.0.patch) was created to fix issues with webpack5.99.9 but only takes effect on webpack5.100.0 and later versions. The patchedDependencies entry should use "webpack@^5.100.0" to ensure the patch applies to the correct version range.

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1330
File: .changeset/olive-animals-attend.md:1-3
Timestamp: 2025-07-22T09:26:16.722Z
Learning: In the lynx-family/lynx-stack repository, CI checks require changesets when files matching the pattern "src/**" are modified (as configured in .changeset/config.json). For internal changes that don't need meaningful changesets, an empty changeset file is used to satisfy the CI requirement while not generating any release notes.

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1453
File: vitest.config.ts:49-61
Timestamp: 2025-08-06T13:28:57.139Z
Learning: In the lynx-family/lynx-stack repository, the file `packages/react/testing-library/src/vitest.config.js` is source code for the testing library that gets exported for users, not a test configuration that should be included in the main vitest projects array.

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1330
File: .changeset/olive-animals-attend.md:1-3
Timestamp: 2025-07-22T09:23:07.797Z
Learning: In the lynx-family/lynx-stack repository, changesets are only required for meaningful changes to end-users such as bugfixes and features. Internal/development changes like chores, refactoring, or removing debug info do not need changeset entries.

Learnt from: PupilTong
PR: lynx-family/lynx-stack#1029
File: packages/web-platform/web-core/src/uiThread/createRenderAllOnUI.ts:95-99
Timestamp: 2025-07-16T06:28:26.463Z
Learning: In the lynx-stack codebase, CSS selectors in SSR hydration are generated by their own packages, ensuring a predictable format that makes simple string manipulation safe and preferable over regex for performance reasons.

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1238
File: packages/react/runtime/src/debug/component-stack.ts:70-90
Timestamp: 2025-07-18T04:27:18.291Z
Learning: The component-stack.ts file in packages/react/runtime/src/debug/component-stack.ts is a direct fork from https://github.com/preactjs/preact/blob/main/debug/src/component-stack.js. The team prefers to keep it aligned with the upstream Preact version and may contribute improvements back to Preact in the future.

📚 Learning: 2025-08-06T13:28:57.139Z

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1453
File: vitest.config.ts:49-61
Timestamp: 2025-08-06T13:28:57.139Z
Learning: In the lynx-family/lynx-stack repository, the file `packages/rspeedy/create-rspeedy/template-react-vitest-rltl-js/vitest.config.js` is a template file for scaffolding new Rspeedy projects, not a test configuration that should be included in the main vitest projects array.

Applied to files:

• packages/rspeedy/plugin-react/test/generator.test.ts
• packages/rspeedy/plugin-react/test/basic.test.ts
• packages/rspeedy/plugin-react/test/background-only.test.ts
• packages/rspeedy/plugin-react/test/lazy.test.ts
• packages/rspeedy/plugin-react/test/refresh.test.ts
• packages/rspeedy/plugin-react/test/createRspeedy.ts
• packages/rspeedy/plugin-react/test/css.test.ts
• packages/rspeedy/plugin-react/test/web.test.ts
• packages/rspeedy/plugin-react/test/config.test.ts
• packages/rspeedy/plugin-react/test/swc-config.test.ts

📚 Learning: 2025-08-06T13:28:57.139Z

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1453
File: vitest.config.ts:49-61
Timestamp: 2025-08-06T13:28:57.139Z
Learning: In the lynx-family/lynx-stack repository, the file `packages/react/testing-library/src/vitest.config.js` is source code for the testing library that gets exported for users, not a test configuration that should be included in the main vitest projects array.

Applied to files:

• packages/rspeedy/plugin-react/test/generator.test.ts
• packages/rspeedy/plugin-react/test/basic.test.ts
• packages/rspeedy/plugin-react/test/background-only.test.ts
• packages/rspeedy/plugin-react/test/lazy.test.ts
• packages/rspeedy/plugin-react/test/refresh.test.ts
• packages/rspeedy/plugin-react/test/css.test.ts
• packages/rspeedy/plugin-react/test/web.test.ts
• packages/rspeedy/plugin-react/test/config.test.ts
• packages/rspeedy/plugin-react/test/swc-config.test.ts

📚 Learning: 2025-07-16T06:28:26.463Z

Learnt from: PupilTong
PR: lynx-family/lynx-stack#1029
File: packages/web-platform/web-core/src/uiThread/createRenderAllOnUI.ts:95-99
Timestamp: 2025-07-16T06:28:26.463Z
Learning: In the lynx-stack codebase, CSS selectors in SSR hydration are generated by their own packages, ensuring a predictable format that makes simple string manipulation safe and preferable over regex for performance reasons.

Applied to files:

• packages/rspeedy/plugin-react/test/generator.test.ts
• packages/rspeedy/plugin-react/test/css.test.ts
• packages/rspeedy/plugin-react/test/web.test.ts
• packages/rspeedy/plugin-react/test/config.test.ts

📚 Learning: 2025-07-18T04:27:18.291Z

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1238
File: packages/react/runtime/src/debug/component-stack.ts:70-90
Timestamp: 2025-07-18T04:27:18.291Z
Learning: The component-stack.ts file in packages/react/runtime/src/debug/component-stack.ts is a direct fork from https://github.com/preactjs/preact/blob/main/debug/src/component-stack.js. The team prefers to keep it aligned with the upstream Preact version and may contribute improvements back to Preact in the future.

Applied to files:

• packages/rspeedy/plugin-react/test/basic.test.ts
• packages/rspeedy/plugin-react/test/background-only.test.ts
• packages/rspeedy/plugin-react/test/lazy.test.ts
• packages/rspeedy/plugin-react/test/refresh.test.ts

📚 Learning: 2025-08-07T04:00:59.627Z

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1454
File: pnpm-workspace.yaml:46-46
Timestamp: 2025-08-07T04:00:59.627Z
Learning: In the lynx-family/lynx-stack repository, the webpack patch (patches/webpack5.101.0.patch) was created to fix issues with webpack5.99.9 but only takes effect on webpack5.100.0 and later versions. The patchedDependencies entry should use "webpack@^5.100.0" to ensure the patch applies to the correct version range.

Applied to files:

• packages/rspeedy/plugin-react/test/web.test.ts
• packages/rspeedy/plugin-react/test/config.test.ts

📚 Learning: 2025-08-06T08:25:15.392Z

Learnt from: colinaaa
PR: lynx-family/lynx-stack#1447
File: pnpm-workspace.yaml:20-22
Timestamp: 2025-08-06T08:25:15.392Z
Learning: In pnpm, configDependencies (used for plugins like pnpm/plugin-better-defaults and pnpm/plugin-trusted-deps) do not appear in pnpm-lock.yaml and do not require lockfile updates. They are installed separately in pnpm's own cache/store as configuration artifacts, not as part of the workspace's dependency tree.

Applied to files:

• packages/rspeedy/plugin-react/test/config.test.ts

🧬 Code Graph Analysis (1)

packages/rspeedy/plugin-react/test/refresh.test.ts (1)

packages/webpack/react-refresh-webpack-plugin/src/ReactRefreshRspackPlugin.ts (1)

• ReactRefreshRspackPlugin (72-176)

🔇 Additional comments (20)

packages/rspeedy/plugin-react/test/createRspeedy.ts (1)

1-15: LGTM! Clean test utility implementation.

The createStubRspeedy function provides a consistent way to set up Rspeedy instances for testing with a sensible default cwd when not specified. The implementation is straightforward and follows good practices.

packages/rspeedy/plugin-react/test/background-only.test.ts (1)

11-11: LGTM! Clean migration to the test stub utility.

The import change to use createStubRspeedy from the local test utility ensures consistent test setup with proper cwd handling while maintaining the same API surface.

packages/rspeedy/plugin-react/test/basic.test.ts (1)

12-12: LGTM! Consistent with the test utility migration pattern.

The import change aligns with the standardization effort to use the local stub utility across test files.

packages/rspeedy/plugin-react/test/generator.test.ts (2)

8-8: LGTM! Clean migration to the test stub utility.

The import change follows the established pattern for standardizing test setup.

---

13-14: LGTM! Complete migration from Rsbuild to Rspeedy.

The function calls and configuration keys have been properly updated to use createRspeedy and rspeedyConfig, maintaining the same test logic while aligning with the new build tooling.

Also applies to: 44-45

packages/rspeedy/plugin-react/test/lazy.test.ts (2)

9-9: LGTM! Consistent import migration to test stub utility.

The import change aligns with the standardization effort across the test suite.

---

16-17: LGTM! Comprehensive migration from Rsbuild to Rspeedy.

All function calls and configuration keys have been properly updated throughout the test file, maintaining test integrity while adopting the new build tooling.

Also applies to: 56-57, 78-79

packages/rspeedy/plugin-react/test/css.test.ts (2)

20-20: LGTM! Systematic refactor to use stubbed build system.

The import change from createRsbuild to createStubRspeedy (aliased as createRspeedy) is consistent with the PR's objective to resolve module paths from rootPath. This stub approach allows tests to run with controlled environment setup.

---

30-31: LGTM! Consistent configuration key updates.

All instances of rsbuildConfig have been systematically updated to rspeedyConfig to align with the new build system API. The changes maintain the same configuration structure and test logic.

Also applies to: 49-55, 82-83, 96-97, 126-127, 171-172, 202-203, 233-234, 269-270, 309-310, 355-356, 389-390, 419-420, 446-447, 481-482, 516-517, 550-551, 582-583

packages/rspeedy/plugin-react/test/refresh.test.ts (3)

6-6: LGTM! Import change aligns with PR objectives.

The import change from createRsbuild to createStubRspeedy (aliased as createRspeedy) is consistent with the broader refactor to use the stubbed build system.

---

19-20: LGTM! Configuration key updated consistently.

The configuration key change from rsbuildConfig to rspeedyConfig aligns with the new build system API.

---

42-48: Good improvement with optional chaining for safety.

The addition of optional chaining (?.) when accessing rspackConfig properties and the use of the toHaveLoader helper matcher improves test safety and simplifies the loader presence verification logic.

packages/rspeedy/plugin-react/test/web.test.ts (3)

9-9: LGTM! Import change consistent with refactor.

The import change from createRsbuild to createStubRspeedy (aliased as createRspeedy) follows the same pattern as other test files in this refactor.

---

16-17: LGTM! Configuration key updates applied consistently.

All instances of rsbuildConfig have been updated to rspeedyConfig to align with the new build system API.

Also applies to: 40-41, 66-67, 114-115, 159-160, 199-200

---

98-108: The assertions in web.test.ts correctly reflect the intended behavior:

• Both the web and lynx builds should include the LynxTemplatePlugin.
• Only the lynx build (not the web build) uses the LynxEncodePlugin.

No changes are needed here.

packages/rspeedy/plugin-react/test/config.test.ts (2)

15-15: LGTM! Systematic test refactoring to use stub implementation.

The change to use createStubRspeedy as a stub for testing provides better test isolation and environment consistency.

---

23-30: LGTM! Consistent configuration key renaming.

The systematic change from rsbuildConfig to rspeedyConfig aligns with the stub implementation and maintains all existing test logic.

Also applies to: 187-194, 270-280, 295-305, 346-353, 370-379, 417-426, 443-452, 469-487

packages/rspeedy/plugin-react/test/swc-config.test.ts (3)

9-9: LGTM! Consistent with test refactoring pattern.

The import change aligns with the systematic refactoring to use stub implementations across the test suite.

---

20-43: LGTM! Systematic configuration key updates.

The consistent change from rsbuildConfig to rspeedyConfig maintains the same test structure while using the stub implementation.

Also applies to: 88-105, 123-130, 196-203, 238-252, 308-318

---

47-82: LGTM! Necessary snapshot updates for stub environment.

The updated snapshots and expectations reflect the behavior differences in the stub test environment, including updated cache paths, target configurations, and include patterns.

Also applies to: 144-154, 283-283, 332-341

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[codspeed-hq]

CodSpeed Performance Report

Merging #1460 will not alter performance

_{Comparing colinaaa:colin/0807/alias (9e4a0ae) with main (fb7096b)}

Summary

✅ 10 untouched benchmarks

[relativeci]

React Example

#3897 Bundle Size — 235.26KiB (0%).

9e4a0ae(current) vs ed2ddcc main#3893(baseline)

Bundle metrics  no changes

	Current #3897	Baseline #3893
Initial JS	0B	0B
Initial CSS	0B	0B
Cache Invalidation	0%	0%
Chunks	0	0
Assets	4	4
Modules	159	159
Duplicate Modules	64	64
Duplicate Code	45.81%	45.81%
Packages	2	2
Duplicate Packages	0	0

Bundle size by type  no changes

	Current #3897	Baseline #3893
IMG	145.76KiB	145.76KiB
Other	89.5KiB	89.5KiB

Bundle analysis report Branch colinaaa:colin/0807/alias Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[relativeci]

Web Explorer

#3893 Bundle Size — 343.48KiB (-0.01%).

9e4a0ae(current) vs ed2ddcc main#3889(baseline)

Bundle metrics   3 changes 1 improvement

	Current #3893	Baseline #3889
Initial JS	142.95KiB(-0.03%)	143KiB
Initial CSS	31.84KiB	31.84KiB
Cache Invalidation	41.63%	41.62%
Chunks	7	7
Assets	7	7
Modules	211(-0.47%)	212
Duplicate Modules	17	17
Duplicate Code	3.97%	3.97%
Packages	4	4
Duplicate Packages	0	0

Bundle size by type   1 change 1 improvement

	Current #3893	Baseline #3889
JS	228.69KiB (-0.02%)	228.74KiB
Other	82.95KiB	82.95KiB
CSS	31.84KiB	31.84KiB

Bundle analysis report Branch colinaaa:colin/0807/alias Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}