Embedding a react app within a squarespace site

Question

I'm trying to embed a small react app into a squarespace site.

Here's the page: https://www.birdiebreak.com/referral-profile?referralCode=WHUOS

I can get the react app to load just fine but various parts of the site disappear! Specifically the header and any images on the page.

I've tried using the Code widget as well as the Embed widget with both have the same result. I did try a basic Create React App site to see if the minimal code I built was the problem but got the same issues.

Has anyone managed to do this successfully?

Answer 1

I don't know why exactly, but if I add a script tag into the body referencing my react app <script src="path-to-react/main.buildcode.js" /> parts of the squarespace site just stop loading.

However if instead I add a script loader things work just fine.

<script type="text/javascript">
    (function (g, r, head, script) {
        head = r.getElementsByTagName("head")[0]; 
        script = r.createElement("script"); 
        script.async = 1; 
        script.src = "https://birdie-break-develop.azurewebsites.net/static/js/main.d2ee648d.js";            
        
        head.appendChild(script);

    })(window, document);
</script>