CODEWITHSUNDEEP
javascriptreactjsnext.js
Blueboye
Blueboye

Reputation: 1494

React + Nextjs - External scripts loading but not executing together

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.

Upvotes: 1

Views: 4488

Answers (2)

channasmcs
channasmcs

Reputation: 1156

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";

Upvotes: 1

Hasan Sefa Ozalp
Hasan Sefa Ozalp

Reputation: 7208

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>
    </>
  )
}

Upvotes: 0

Related Questions