AEM Blank Page Issue After Upgrading react-router-dom in Remote SPA

[Mukesh42]

Hi All,

Recently, while working on my AEM project, I encountered an unexpected issue after upgrading the react-router-dom dependency from version 5.3.4 to 6.22.0 in a remote Single Page Application (SPA) setup.

Issue Description:
After updating the react-router-dom dependency, I made the necessary changes in the app.js file of my AEM project. Specifically, I replaced the <Switch> component with the <Routes> component as Switch is not supported in react-router-dom version 6.

// Before:
<Switch>
<Route path="/"> <Home /> </Route>
</Switch>

// After:
<Routes>
<Route path="/" element={<Home />} />
</Routes>

However, after making this change, I noticed that the AEM home page started rendering as a blank page as shown in the below image while the react page continued to work as expected.

Is there any way to fix this issue? Any help will be appreciated. Thanks.

[TarunKumar]

Hi @Mukesh42 ,

Upgrading react-router-dom may have compatibility issues with the other dependencies.
Can you check in system console if any dependencies are unresolved, also have a look at error log file, you might see some error throwing up there.


Thanks
Tarun

[Mukesh42]

Hi @TarunKumar ,

There are no system console errors that are different after updating. Also, no issues shown regarding the dependencies. Even I have checked the log files still no specific issues for this.

Thanks,

Mukesh