title: React + Nextjs - External scripts loading but not executing together
body: <p>I have a next js application and I need to integrate it with an existing site by importing the header and footer from the parent site. It the markup along with supporting libs are being delivered through a JS file, one for each header and footer respectively. This is how my _apps.js, navigation.js and footer.js file looks like:</p>
  
  <p>_app.js:</p>
  
  <pre><code>render() {
      return (
        &lt;Provider store={reduxStore}&gt;
          &lt;Head headerData={newStaticData} /&gt;
          &lt;Navigation /&gt;
          &lt;OtherComponents /&gt;
          &lt;Footer /&gt;
        &lt;/Provider&gt;
      );
    }
  </code></pre>
  
  <p>navigation.js:</p>
  
  <pre><code>class Navigation extends Component {
      shouldComponentUpdate() {
          return false;
      }
  
      componentDidMount() {
          const script = document.createElement('script');
          script.src = "https://mainsite.com/external/header.js";
          script.async = true
          document.body.appendChild(script);
      }
  
      render() {
          return (
              &lt;div id="target_div_id"&gt;&lt;/div&gt;
          )
      }
  }
  
  export default Navigation;
  </code></pre>
  
  <p>footer.js:</p>
  
  <pre><code>class Footer extends Component {
      shouldComponentUpdate() {
          return false;
      }
  
      componentDidMount() {
          const script = document.createElement('script');
          script.src = "https://mainsite.com/external/footer.js";
          script.async = true
          document.body.appendChild(script);
      }
  
      render() {
          return (
              &lt;div id="footer_target_id"&gt;&lt;/div&gt;
          )
      }
  }
  
  export default Footer;
  </code></pre>
  
  <p>When I run this code, just the main navigation will appear but not the footer. If it comment out the navigation, then the footer will appear. I am not sure why but it looks like only one loads at a time. I have tried using <code>script.defer=true</code> but hasn't helped either. </p>
  
  <p>Can anyone advice what might be causing this and what's the resolution?</p>
  
  <p>TIA.</p>