Sharing context across Microfrontends

GuyLearningReact — Fri, 18 Mar 2022 19:04:09 +0000

TLDR; How to pass Context to Microfrontends?
The application is divided into multiple Microfrontends or react apps. Each of this is running in a different port.
Container is hosting other Micrfrontends.
Each one is a separate react app and it is a runtime integration.

Currently passing some parameters via URL to other Microfrontends.

Need to pass the data across these react apps (MFEs) using React Context.

Defined ReactContext Provider in Container (ReactApp1) and stored value (say color=black).

To access this color inside the lower level Microfrontend (ReactApp2) we need the context to be available. How to make it available?

ScriptExternalLoadError Loading script failed

GuyLearningReact — Tue, 15 Feb 2022 00:13:53 +0000

Hello Experts,

Please help!

This is regarding webpack Module Federation question.
Created 2 react apps (remote and host) using npx create-mf-app

Rendered Simple Hello in react app1.

Adjusted webpack config files in both react apps.

Works great in one machine. Did the same in other machine and it throws errors:
Uncaught ScriptExternalLoadError: Loading script failed.
(missing: http://localhost:8081/remoteEntry.js)
while loading "./Counter" from webpack/container/reference/remote..

Any help greatly appreciated!

DEV Community: GuyLearningReact

Sharing context across Microfrontends

ScriptExternalLoadError Loading script failed