Multiple react versions runtime plugin example does not work with `loadRemote`

[p12y]

Problem

Multiple react version runtime plugin example does not work with loadRemote, only import.

Example

https://github.com/module-federation/module-federation-examples/tree/master/runtime-plugins/multiple-react-versions

To recreate

In app1/App.js, update the lazy imports to use loadRemote instead of import:

+ import { loadRemote } from '@module-federation/enhanced/runtime';

- const ModernComponent = React.lazy(() => import('app2/ModernComponent'));
- const RemoteButton = React.lazy(() => import('app2/Button'));
+ const ModernComponent = React.lazy(() => loadRemote('app2/ModernComponent'));
+ const RemoteButton = React.lazy(() => loadRemote('app2/Button'));

Expected behaviour

The app should continue to work as expected

Actual behaviour

The app crashes with "ERROR Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function."

Impact

The plugin approach to supporting multiple react versions does not work when using the runtime utils, which are needed when loading modules dynamically.

[ScriptedAlchemy]

Ill need to check this again, its been a while and we have since created the framework bridge capability.

https://module-federation.io/practice/bridge/index.html

[ScriptedAlchemy]

You also have to return an object with a default key. So loading remotely may not work without returning an object like {default: value}.