I have two react application deployed as header and footer at some urls
header - 'someurl/header'
footer - 'someurl/footer'
I want to integrate this in a third application
I am able to integrate one of them at a time and both the react application is properly loaded but when i integrate both of them together only first application loads properly, second also renders but not as react component
Here is my code snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>.
</script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<script async>
fetch('http://url/footer')
.then((response) => response.text())
.then(data => {
const node = document.createRange().createContextualFragment(data);
document.getElementById("footer-container").appendChild(node);
});
</script>
<script defer >
fetch('http://url/header')
.then((response) => response.text())
.then(data => {
const node = document.createRange().createContextualFragment(data);
document.getElementById("header-container").appendChild(node)
});
</script>
<div id="header-container"></div>
<div id="outer_div">outer content</div>
<div id="footer-container"></div>
Any help or hints is appreciated thanks in advance