I have an MFE React app that renders a UI with various differences based on the desired brand. Differences between brands are mainly theme/colour related. But these different brands also are hosted at different URLs, with Akamai dealing with that side of things. So you’ll have something like:
www.brand1.com.au
renders the react app with brand1
as an MFE parameter
www.brand2.com.au
renders the react app with brand2
as an MFE parameter
and so on. Now the actual compiled app is the same, it’s built once in Bamboo then served from various different domains, with the brand just being an MFE parameter passed in as a prop to the React app. However, for some brands the page gives the React white screen of death (white screen, no console/network errors, no error boundary errors, nothing). And I’ve narrowed it down to coming from React router.
The part that’s causing the white page is when I try to render the app’s routes in the router, I’m using react-router-dom: ^6.8.1
and I have something like:
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
...
return (
<Router>
<Routes>
...
<Route path="/dashboard" element={<p>test</p>} />
<Routes/>
<Router/>
);
Trying to render this react router stuff causes the white page for some brands. I tried a hash router, running yarn upgrade
, various other white page react router fixes but the problem persists. My questions is, given that the built app is the same across brands/domains, but the white page issue only exists for some of them, where would the issue persist? Would it be a hosting/Akamai issue? Would it be related to out UI’s build config (I wouldn’t thing so, since that’s brand agnostic)?
Any insight would be greatly appreciated