Tengo dos aplicaciones de reacción implementadas como encabezado y pie de página en algún encabezado de URL - pie de página 'someurl/header' - 'someurl/footer' Quiero integrar esto en una tercera aplicación. Puedo integrar uno de ellos a la vez y ambos La aplicación de reacción se carga correctamente, pero cuando los integro a ambos, solo la primera aplicación se carga correctamente, la segunda también se procesa, pero no como componente de reacción. Aquí está mi fragmento de código.
<!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>Cualquier ayuda o consejo se agradece de antemano