Skip to content

refactor: sink React packages from root to individual packages#3907

Merged
ScriptedAlchemy merged 33 commits intomainfrom
sink-react-packages
Jul 17, 2025
Merged

refactor: sink React packages from root to individual packages#3907
ScriptedAlchemy merged 33 commits intomainfrom
sink-react-packages

Conversation

@ScriptedAlchemy
Copy link
Copy Markdown
Member

Summary

  • Removed React packages from root package.json and moved them to packages that actually need them
  • Fixed rsbuild-plugin configuration to match other packages in the workspace
  • Updated tests to handle platform-specific files

Changes Made

Dependency Relocation

  • Removed from root package.json:

    • react: 18.3.1
    • react-dom: 18.3.1
    • @types/react: 18.3.11
    • @types/react-dom: 18.3.0
    • @nx/next: 21.0.3
  • Added to individual packages:

    • bridge-shared: Added @types/react (uses React.CSSProperties)
    • nextjs-mf: Added @types/react and @types/react-dom
    • modernjs: Added @types/react and @types/react-dom
    • vue3-bridge: Added @types/react (transitive dependency via bridge-shared)
    • third-party-dts-extractor: Added @types/react as devDependency for tests

Configuration Fixes

  • Fixed rsbuild-plugin configuration:
    • Corrected main path in project.json from "cli/src/index.ts" to "src/cli/index.ts"
    • Created tsconfig.lib.json following workspace patterns
    • Updated tsconfig.json to extend from base config

Test Updates

  • Updated tests to handle platform-specific files (fsevents on macOS)
  • Made third-party-dts-extractor tests more resilient to missing dependencies

Test Results

  • All 35 packages build successfully without type errors
  • Tests pass with minor platform-specific adjustments

🤖 Generated with Claude Code

- Remove react, react-dom, @types/react, @types/react-dom from root package.json
- Add React type dependencies to packages that need them:
  - bridge-shared: Added @types/react for React.CSSProperties usage
  - nextjs-mf: Added @types/react and @types/react-dom
  - modernjs: Added @types/react and @types/react-dom
  - vue3-bridge: Added @types/react (transitive dependency via bridge-shared)
  - third-party-dts-extractor: Added @types/react as devDependency for tests
- Remove @nx/next from root package.json
- Fix rsbuild-plugin configuration:
  - Correct main path in project.json
  - Add tsconfig.lib.json following workspace patterns
  - Update tsconfig.json to extend from base config
- Update tests to handle platform-specific files (fsevents)
- All 35 packages build successfully without type errors
@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Jul 14, 2025

🦋 Changeset detected

Latest commit: 766440e

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

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

@netlify
Copy link
Copy Markdown

netlify bot commented Jul 14, 2025

Deploy Preview for module-federation-docs ready!

Name Link
🔨 Latest commit 766440e
🔍 Latest deploy log https://app.netlify.com/projects/module-federation-docs/deploys/68795d4d786cb20008c49af8
😎 Deploy Preview https://deploy-preview-3907--module-federation-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

The utilities package uses React in ErrorBoundary.tsx but was missing
the React type definitions after they were removed from the root package.json.
Reverted changes to the test file as requested. The package already has
@types/react in devDependencies, so the original tests should work.
The tests were looking for React types in the root node_modules, but after
sinking React packages, they're only available in the local package context.
Updated the ThirdPartyExtractor to use packageRoot instead of projectRoot.
Force a fresh CI run to avoid potential cache issues.
Resolves CI build failure where @module-federation/sdk and other workspace
dependencies could not be found during TypeScript compilation.
Ensures proper module resolution for workspace dependencies in CI environment.
Remove explicit path mappings to rely on workspace dependency resolution,
matching the pattern used by other packages like enhanced.
… config

Prevents bundling workspace dependencies and instead relies on runtime resolution,
fixing TypeScript module resolution issues in CI environment.
- Remove tsconfig.lib.json file (not present on main branch)
- Update project.json to use tsconfig.json instead of tsconfig.lib.json
- Revert rollup.config.js to original state
- This matches the main branch configuration and avoids TypeScript resolution issues
- Added @nx/next to Next.js apps to fix server resolution errors
- Added React dependencies to runtime-demo apps
- Added React types for TypeScript compilation

Fixes CI failures from moving React packages from root.
- Added React and React types to all manifest-demo apps:
  - 3009-webpack-provider
  - 3010-rspack-provider
  - 3011-rspack-manifest-provider
  - 3012-rspack-js-entry-provider
  - webpack-host

Fixes "Cannot resolve 'react'" errors in e2e-manifest and e2e-runtime tests.
- Added React dependencies to bundle-size, reactStorybook, reactRemoteUI apps
- Added react-router-dom to webpack-host, react-ts-host, reactStorybook apps
- Fixes remaining "Cannot find module 'react'" and "Cannot find module 'react-router-dom'" errors

Should resolve remaining e2e-runtime, e2e-manifest, and Devtools failures.
- Update webpack dependency to be optional in nextjs-mf package
- Add React dependencies to various demo apps and runtime host
- Add react-router-dom dependency where needed
- Fix missing @nx/next dependencies in apps
- Keep React types additions from PR while maintaining newer Modern.js versions
- Merge webpack and utilities dependencies from main
- Regenerate pnpm-lock.yaml to resolve conflicts
- Switch rsbuild-plugin compiler from swc to tsc to fix module resolution errors
- Add explicit module paths in tsconfig for workspace dependencies
- Remove @module-federation/utilities dependency from example apps (3000, 3001, 3002)
- Update lockfile after dependency changes
- Sync with latest package.json changes
- Update bridge-react package dependencies to match workspace versions
- Add require.resolve aliases in vitest config for React modules
- Fix module resolution for tests after moving React to individual packages
- Use vitest.config.ts from main for bridge-react
- Use tsconfig.json from main for rsbuild-plugin
- Switch from vitest to @nx/jest executor for consistency with monorepo
- Convert test files from vitest to jest syntax
- Use monorepo jest dependencies instead of package-specific ones
- Fix TextEncoder/TextDecoder not defined in Node.js environment
- Update mocks to work with jest.mock() instead of vi.mock()
- Add jest.config.ts and tsconfig.spec.json for proper test configuration
- Fix TypeScript errors in test files
This fixes the React 19 compatibility issue where the legacy bridge-react
would throw an error when detecting React 19 in remote5.
- Revert remote5 to use React 19 to match main branch
- Revert host React types version to match main branch
- Revert remote5 test content to match main branch expectations
- Change jsx from 'react-jsx' to 'preserve' to match main branch
- This was causing build failures in the React sinking process
- All e2e tests now passing (15/15)
- Remote5 correctly loads React 19 component in React 18 host
- Module federation cross-version compatibility restored
…oauthor script

- Add --dry-run flag for safe preview without modifications
- Auto-detect base branch from existing PR using gh CLI
- Show detailed commit analysis including affected commits count
- Flexible argument parsing supporting any order
- Enhanced summary with current branch, base branch, and merge base info
});

it('createRemoteAppComponent with custom createRoot prop', async () => {
const renderMock = vi.fn();
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So vitest has some issues , and we need to change the test tools to jest ?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah vitest has proplems resolving react/jsx-runtime, i can try converting it back again but each time it would have problems with TS resolve - jest seems to work fine.

In future i think we shuold move to rstest and rslib for whole repo and most of these issues will go away haha

- Document dependency relocation from root to individual packages
- Include rsbuild-plugin configuration fixes
- Note test updates for platform-specific files

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
@ScriptedAlchemy ScriptedAlchemy merged commit d31a326 into main Jul 17, 2025
17 checks passed
@ScriptedAlchemy ScriptedAlchemy deleted the sink-react-packages branch July 17, 2025 22:45
@2heal1 2heal1 mentioned this pull request Jul 24, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants