This example demos the ability to load two separate versions of react (v16.6.3 and v16.13.1).

Check the typescript version of this example here.

Module Federation allows us to create an adapter which attaches a hooks-friendly version to render a section of thr app using modern versions.

• app1 uses and older version of react, not compatible with react Hooks
• app2 uses a modern react version and its components are hooks based

Run pnpm run start. This will build and serve both app1 and app2 on ports 3001 and 3002 respectively.

• localhost:3001 (HOST)
• localhost:3002 (STANDALONE REMOTE)

This example contains two important components, the ReactAdapterConsumer and ReactAdapterProvider. They are responsible to make the two versions of react work together.

The adapter consumes both versions of react to "translate" the props into a fresh render. This could be presented as a HOC or federated components could have a legacy export containing the adapter build in.

This component is responsible to dynamic render/hydrate the federated component using it host version of React.

You can see the usage here.

import React from 'react';

const Button = props => {
  return <button style={{ color: props.color }}>Click me</button>;
};

export const Adapted = React.forwardRef((props, ref) => {
  return <ReactAdapterProvider component={Button} color="red" ref={ref} />;
});

This component is responsible to render the federated component using the remote version of React.

You can see the usage here.

<ReactAdapterConsumer
  color="blue"
  fallback={<div>Loading...</div>}
  importer={() => import('app2/Button').then(module => ({ default: module.Adapted }))}
/>

To run tests in interactive mode, run npm run cypress:debug from the root directory of the project. It will open Cypress Test Runner and allow to run tests in interactive mode. More info about "How to run tests"

To build app and run test in headless mode, run yarn e2e:ci. It will build app and run tests for this workspace in headless mode. If tets failed cypress will create cypress directory in sample root folder with screenshots and videos.

"Best Practices, Rules amd more interesting information here