React + Nextjs - External scripts loading but not executing together

Question

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:

_app.js:

render() {
    return (
      <Provider store={reduxStore}>
        <Head headerData={newStaticData} />
        <Navigation />
        <OtherComponents />
        <Footer />
      </Provider>
    );
  }

navigation.js:

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 (
            <div id="target_div_id"></div>
        )
    }
}

export default Navigation;

footer.js:

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 (
            <div id="footer_target_id"></div>
        )
    }
}

export default Footer;

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 script.defer=true but hasn't helped either.

Can anyone advice what might be causing this and what's the resolution?

TIA.

channasmcs · Accepted Answer · 2019-11-14 05:46:18Z

1

you can easily do this with react-helmet even in child component

import React from "react";
import {Helmet} from "react-helmet";
class Navigation extends Component {
render() {
    return (
        <div id="target_div_id">
        <Helmet>
            <script type="text/javascript" href="https://mainsite.com/external/header.js" />
        </Helmet></div>
    )
 }
}
export default Navigation;

try you use react hooks instead of react Component lifecycle

const Navigation = ()=> {
 return (
        <div id="target_div_id">
        <Helmet>
            <script type="text/javascript" href="https://mainsite.com/external/header.js" />
        </Helmet></div>
    )
}

export {Navigation} ;

// parent 
import {Navigation} from "../Navigation.js";

answered Nov 14, 2019 at 5:46

channasmcs

1,15612 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hasan Sefa Ozalp · Accepted Answer · 2019-11-14 05:20:53Z

0

I would suggest you not to use _app.js for this.

Try creating a Layout file like below:

// MainLayout.js
import NavBar from './Navigation.js'
import Footer from './Footer.js'

export default ({ children }) => (
  <>
    <Navigation />
    {children}
    <Footer />
  </>
)

And have your main file as like this:

// index.js
import React from 'react'
import MainLayout from '../components/Layouts/MainLayout.js'
import Banner from '../components/Banner/Banner.js'

export default function Home() {
  return (
    <>
      <MainLayout>
        <Banner />
      </MainLayout>
    </>
  )
}

edited Nov 14, 2019 at 5:20

answered Nov 14, 2019 at 5:12

Hasan Sefa Ozalp

7,3125 gold badges37 silver badges47 bronze badges

Collectives™ on Stack Overflow

React + Nextjs - External scripts loading but not executing together

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related