Skip to content

feat(bridge-react): add support for custom createRoot on createBridgeComponent #3544

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

radualex
Copy link

Description

Extended the definition of createBridgeComponent method to support an optional custom createRoot property that can overwrite the default createRoot method. This can be used in the client app to load a custom React DOM for example:

import React from 'react';
import ReactDOMClient from 'react-dom/client';
import { createBridgeComponent } from '@module-federation/bridge-react';

const App: React.FunctionComponent = () => {
    return (
        <div />
    );
};

export default createBridgeComponent({
    rootComponent: App,
    createRoot: (container, options) => {
        return ReactDOMClient.createRoot(container, options);
    }
});

Related Issue

Fixes #3537

Types of changes

  • Docs change / refactoring / dependency upgrade
  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)

Checklist

  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • I have updated the documentation.

Copy link

changeset-bot bot commented Feb 24, 2025

🦋 Changeset detected

Latest commit: 7479ba4

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

This PR includes changesets to release 29 packages
Name Type
@module-federation/bridge-react Major
@module-federation/runtime Major
@module-federation/enhanced Major
@module-federation/rspack Major
@module-federation/webpack-bundler-runtime Major
@module-federation/sdk Major
@module-federation/runtime-tools Major
@module-federation/managers Major
@module-federation/manifest Major
@module-federation/dts-plugin Major
@module-federation/third-party-dts-extractor Major
@module-federation/devtools Major
@module-federation/bridge-vue3 Major
@module-federation/bridge-shared Major
@module-federation/bridge-react-webpack-plugin Major
@module-federation/modern-js Major
@module-federation/retry-plugin Major
@module-federation/data-prefetch Major
@module-federation/rsbuild-plugin Major
@module-federation/error-codes Major
@module-federation/inject-external-runtime-core-plugin Major
@module-federation/nextjs-mf Patch
@module-federation/node Patch
@module-federation/storybook-addon Major
@module-federation/modernjsapp Patch
@module-federation/esbuild Patch
@module-federation/runtime-core Patch
@module-federation/utilities Patch
website-new 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

Copy link

netlify bot commented Feb 24, 2025

Deploy Preview for module-federation-docs ready!

Name Link
🔨 Latest commit 7479ba4
🔍 Latest deploy log https://app.netlify.com/sites/module-federation-docs/deploys/67d6ba919892e400085e7a90
😎 Deploy Preview https://deploy-preview-3544--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 site configuration.

@radualex radualex marked this pull request as ready for review February 24, 2025 15:15
@danpeen
Copy link
Contributor

danpeen commented Feb 26, 2025

@radualex Thank you for your PR!

@danpeen
Copy link
Contributor

danpeen commented Feb 27, 2025

@radualex I think we have provided the custom render config to let users be able to customize their own render logic. Does this configuration meet your scene?

@danpeen
Copy link
Contributor

danpeen commented Feb 27, 2025

@radualex But also, I think supporting custom createRoot also makes sense. I will support this. (Because I don't know why this CI pipeline keeps failing, I have submitted another pr to support this feature)

@radualex
Copy link
Author

radualex commented Mar 4, 2025

@radualex But also, I think supporting custom createRoot also makes sense. I will support this. (Because I don't know why this CI pipeline keeps failing, I have submitted another pr to support this feature)

@danpeen Alright. Can you reference this PR then, so we can close this?

@Bulletninja
Copy link

I think I identified the CI failure in this PR. Seems the issue is caused by an .only modifier in packages/bridge/bridge-react/__tests__/bridge.spec.tsx which Vitest rejects in CI environments.
Fix PR: radualex#1

Verification steps:
Tests fail with --no-allowOnly flag when .only is present
Tests pass when the modifier is removed

This should resolve the CI error blocking this PR.

fix: remove .only modifier from test to fix CI
@danpeen
Copy link
Contributor

danpeen commented Mar 29, 2025

Hello @radualex, Sorry for the late response. It is in this pr I support the custom createRoot: #3551

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support React v19 in @module-federation/bridge-react
3 participants