<script> tag not working on page change, only on initial load and reload #17919

junaid33 · 2020-10-15T18:49:27Z

junaid33
Oct 15, 2020

Hello,

I have 2 3rd party script tags in _document.js. The script interacts with divs on the page based on classNames. The script works perfectly on the initial load but stops working if I navigate to other pages. If I refresh the page, the script starts working again.

This is an ongoing issue: #4477

Anyway to get the script tag to work on page change?

Answered by jamesmosier

Oct 15, 2020

Hi @junaid33. Do you happen to have an example of what you are seeing?

This sounds similar to another issue where dangerouslySetInnerHTML was not working properly when doing client side navigation due to the manner in which dangerouslySetInnerHTML works: #17346 (reply in thread)

View full answer

jamesmosier · 2020-10-15T19:14:28Z

jamesmosier
Oct 15, 2020

Hi @junaid33. Do you happen to have an example of what you are seeing?

This sounds similar to another issue where dangerouslySetInnerHTML was not working properly when doing client side navigation due to the manner in which dangerouslySetInnerHTML works: #17346 (reply in thread)

26 replies

fvaldez421 Sep 13, 2023

Hey folks, I was able to find a solution for my use case:
I had to dynamically embed an iframe in my application. It would mount correctly on first load or refresh, but would fail when using next links, and when navigating using browser history forward or backward.

The solution recommended above (using an explicit <a> tag) wouldn't work here because the script would fail to reload (and mount) with native browser history fwd/bwd behavior too.

After doing some searching I stumbled upon this Stackoverflow thread that recommended the use of createRange and createContextualFragment. I was able to React-ify it and worked for me, hope it works for you too!

  const scriptRoot = useRef() // gets assigned to a root node
  const script = `<script>...</script>
  
  useEffect(() => {
    // creates a document range (grouping of nodes in the document is my understanding)
    // in this case we instantiate it as empty, on purpose
    const range = document.createRange()
    // creates a mini-document (light weight version), in our range with our script in it
    const documentFragment = range.createContextualFragment(script)
    // appends it to our script root - so it renders in the correct location
    scriptRoot.current.append(documentFragment)
  }, [])

  return <div ref={scriptRoot} />

snazzybytes Nov 16, 2023

interesting. which NextJS version did you have to do this in by the way? i stumbled into the same problem earlier and researching what's causing this in nextjs. did you do this in _app.tsx or layout.tsx (in case you wrap your pages in a layout like me). anyways ill figure it out but thanks

my situation was where Im loading a script on the bottom of a component (say even the wrapper layout.tsx), which controls a dialog box (open or close).
i can click it 100 times and script works just fine... however as many others pointed when you use LINK and navigate to different internal page, the script stopped working. i guess it stems from my lack of understanding of nextjs framework internal ways and optimizations. cheers

fvaldez421 Nov 21, 2023

@snazzybytes - I believe this was on Next 12 (not using the app directory). That said, I was able to implement this on the component itself. In my case, it was a literal reusable script component.

snazzybytes Jan 14, 2024

@fvaldez421 thanks friend. makes sense, i ended up doing what you suggested, just a custom component instead of loading a script which i have not fully stepped through actually (plus it is better that way for learning purposes 🫵 🫡 🫂)

webprismdevin Mar 7, 2024

this was effective for loading custom code from Sanity CMS -> Remix as well. Going to have to go back to some old Next projects and implement this.

ari-motors-team · 2022-01-19T10:22:34Z

ari-motors-team
Jan 19, 2022

I found a solution to UET. It seams to work, but please test yourself. This principle may apply to other scripts as well.
Regarding to UET and SPA in general, I found this.
https://bingadsuet.azurewebsites.net/SPA_Index.html

The solution in nextjs was adding this to _app.js <Head />.

<script id="uetq">{`(function(w,d,t,r,u){....);`}</script>

and fire a page load event, when the page changes.

export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // uet
    if (typeof window !== "undefined" && window.uetq.push) {
      window.uetq = window.uetq || [];
      window.uetq.push("event", "page_view", {
        page_path: pageProps.page.path,
      });
    }
  }, [pageProps.page])
 ...
}

0 replies

vee2xx · 2022-03-27T21:17:07Z

vee2xx
Mar 27, 2022

You can use useEffect to listen for the routeChangeComplete event and and reload (or load the portion you want loaded again) the script. Solved my issue 100%

Edit the _app.js file adding the following:

import Router from "next/router"
import {useEffect} from 'react';

useEffect(() => {
   "use strict";
   Router.events.on("routeChangeComplete", (path) => {
     console.log(`Route change complete.`);
     setTimeout(() => {
     //Write the JS code here 
     }, 0);
     });

     return () => {
       Router.events.off('routeChangeComplete', 0);
   }
 }, [Router]);

Source of inspiration for this fix: https://stackoverflow.com/questions/68389552/how-to-access-the-url-or-page-that-is-currently-loading-on-navigation-with-next/68415175#68415175

NextJs developers should modify the <Script> loading library to add a strategy that will allow a new option something like onRouteChange that'll allow you to easily load a script when router path change event occur - this is a huge oversight and forcing lots of devs to give up using lib (which sucks because it actually is a nice thing that speeds up page loads).

0 replies

HallofFamer · 2022-05-15T02:57:09Z

HallofFamer
May 15, 2022

I found a solution that I can wrap your component in a HOC called withScript(Component, dir, ...srcs), which makes use of useEffect to append or remove scripts when a component mounts/unmounts:

import {useEffect} from "react";

function withScript(Component, dir, ...srcs){
    function componentWithScriptProp(props){
        // eslint-disable-next-line react-hooks/rules-of-hooks
        srcs.forEach(src => {
            useEffect(() => {
                const script = document.createElement("script");
                script.src = `/${dir}/${src}.js`;
                script.defer = true;
                document.body.appendChild(script);
                return () => { document.body.removeChild(script) };
            });
        });
        return <Component {...props} />
    }
    componentWithScriptProp.getInitialProps = Component.getInitialProps;
    componentWithScriptProp.origGetInitialProps = Component.origGetInitialProps;
    if (process.env.NODE_ENV !== 'production') {
        const name = Component.displayName || Component.name || 'Unknown';
        componentWithScriptProp.displayName = `withScript(${name})`;
    }
    return componentWithScriptProp;
}

export default withScript

Now you just have to import withScript and wrap your component like this(assuming the component is called MyComponent and all scripts are located in folder /public/js/):

// Use one script
export default withScript(MyComponent, "js", "tooltip")

// Use multiple script
export default withScript(MyComponent, "js", "tooltip", "popover", "datepicker")

Maybe its not an elegant solution, but it seems to serve the need for now. Maybe I can improve it so that it wont call useEffect() n times for n scripts, though I feel that its highly unlikely that you load more than 5 scripts at a time so I dont think it will cause noticeable slowdown.

0 replies

zackbiernat · 2022-07-14T19:10:21Z

zackbiernat
Jul 14, 2022

This is the workaround to get <script>s working on a nextjs app.

useEffect(() => {
        const script = document.createElement('script');

        script.src = 'https://example.com/somescript.js';
        script.async = true;

        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        };
    }, [propThatChanged]); // router prop or w/e

4 replies

saqib053 Sep 5, 2022

This solution worked for me. you can replace propThatChange with 'router'

zackbiernat Nov 15, 2022

I had a 3rd party script that would load and modify an element on screen and this solution did not work. If anyone experiences similar issues my hacky solution was to load the script (and element-to-be-modified) on a separate page and then point an iframe at it like so:

<iframe style={{ border: 'none' }} src={absolutePathToScriptPage} />

While script tags seem not to work within the context of next/router, the iframe is able to replicate a reload of the script.

hoangvu12 Feb 8, 2023

This is the workaround to get <script>s working on a nextjs app.

useEffect(() => {
        const script = document.createElement('script');

        script.src = 'https://example.com/somescript.js';
        script.async = true;

        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        };
    }, [propThatChanged]); // router prop or w/e

Thank you, saved me from countless hours.

k6alvarez Apr 21, 2024

This is the solution that worked for me as well, thank you!!!

beniusij · 2022-08-02T08:02:38Z

beniusij
Aug 2, 2022

Some proposed solutions work when refreshing a page in a browser, but not when navigating between the pages. That is still an issue and has been a problem for nearly 2 years.

1 reply

dmoKruso Aug 23, 2022

Same here... I couldn't solve the problem either, ended up just ditching the Link tags, and fall back to using normal a tag for navigation, that way we force to refresh the page on each navigation.
But I am still hoping for a solution for this.

nilwurtz · 2022-08-18T06:52:04Z

nilwurtz
Aug 18, 2022

I solved it this way.
next/script not working when routes changed.

  const router = useRouter()
  const [Js, setJs] = useState<React.ReactNode | null>(null)

  const handleComplete = () => {
    setJs(null)
    setJs(
      <Head>
        <script src={<url>} async />
      </Head>
    )
  }

  useEffect(() => {
    setJs(
      <Head>
        <script src={<url>} async />
      </Head>
    )
    router.events.on('routeChangeComplete', handleComplete)
  }, [router.events])

  return (
    <>
      {Js}

1 reply

AashirBhusal Apr 21, 2024

This does not work with Next useRouter ("next/navigation"). The useRouter("next/router") cannot be used anymore as it says router not mounted

Akifcan · 2022-09-15T09:10:47Z

Akifcan
Sep 15, 2022

You can give unique url for every render.
For example

<Script key={i} className='script-tag-js' src={`/path/to/script?v=${Math.random() * 999}`} type='module' />`

You can use this hook also.

import React, { ReactNode, useState, useEffect } from "react"
import { useRouter } from "next/router"
import Script from "next/script"

const useScript = (paths: string[]) => {
 const [scriptTag, setScriptTag] = useState<ReactNode>(<></>)
    const router = useRouter()


    useEffect(() => {
        if (!router.isReady) return

        router.events.on("routeChangeStart", () => {
            setScriptTag(<></>)
        })

        setScriptTag(<>
            {paths.map((x, i) => {
                return <Script key={i} className='script-tag-js' src={`${x}?v=${Math.random() * 999}`} type='module' />
            })}
        </>)


        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [router.asPath, router.isReady])

    return { scriptTag }

}

export default useScript

const Container: FC<ContainerProps> = ({ children, headerType, scripts = [] }) => {

    const { scriptTag } = useScript(['/assets/scripts/helpers/header.js', '/assets/scripts/helpers/modal.js', ...scripts])

    return <>
        <Header type={headerType} />
        {children}
        {scriptTag}
        <Footer />
    </>
}

export default Container

0 replies

IgorBadanyuk · 2022-10-19T15:00:31Z

IgorBadanyuk
Oct 19, 2022

I've tried all the options and so far no results. Even mount and unmount Head with scripts. I don't want to remove Link component from the site because we are losing our speed advantage.

Maybe someone will help. My case is displaying embedded posts from facebook and twitter.

The principle is the same, connect next/script and subscribe to router event. The thing is, most of the scripts have a reload function in the documentation, so we call them when the route changes.

const PageExternalScripts = () => {

const handleComplete = () => {
    if (window === undefined) {
      return
    }

    // Call FB SDK parse function
    if (window.FB !== undefined) {
      window.FB.XFBML.parse()
    }
    
    // Call Twitter widjet js function
    if (window.twttr !== undefined) {
      window.twttr.widgets.load()
    }
  }

  useEffect(() => {
    Router.events.on("routeChangeComplete", handleComplete)
  }, [])

  return (
    <>
      <Script
        src="https://platform.twitter.com/widgets.js"
        strategy="lazyOnload"
      />
      <div id="fb-root" />
      <Script
        src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v15.0"
        strategy="lazyOnload"
      />
    </>
  )

0 replies

RowinVanAmsterdam · 2023-01-18T13:51:03Z

RowinVanAmsterdam
Jan 18, 2023

Unfortunately it seems like it's still an issue. I built a custom to hook for it and wrote a blog post about it for further explanation. Hopefully it helps someone.

The hook looks like this:

import { useEffect, useState } from 'react';

export const useExternalScript = (url: string) => {
    const [isLoaded, setIsLoaded] = useState(false);
    const [error, setError] = useState(false);

    useEffect(() => {
        const script = document.createElement('script');
        script.src = url;
        script.async = true;
        document.head.appendChild(script);

        script.onload = () => setIsLoaded(true);
        script.onerror = () => setError(true);

        return () => {
            document.head.removeChild(script);
        };
    }, [url]);

    return {
        isLoaded,
        error
    };
};

3 replies

harshalone Jan 29, 2023

this hook is not working error:

Unhandled Runtime Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Source
app/hooks/useExternalScript.js (4:45) @ useExternalScript

  2 | 
  3 | export const useExternalScript = (url) => {
> 4 | const [isLoaded, setIsLoaded] = useState(false);

RowinVanAmsterdam Jan 29, 2023

That’s because you’re calling the hook from a place that isn’t allowed. Please read the rules: https://reactjs.org/link/invalid-hook-call

AashirBhusal Apr 21, 2024

hi what about inline internal js script, i am trying to integrate disqus to my website through universal disqus script. How should i use the hook to make it work?. the problem is i need next Link tag and cannot use anchor tag. The disqus script loads initially but if i route to next page then it stops loading and need to do hard refresh to load again. As i know this is done by link tag on purpose but is there any way to get around it.

dshuthwal · 2023-03-02T13:04:19Z

dshuthwal
Mar 2, 2023

External <script> runs only on page load, not on page update. async and defer just for performance. To run the script on soft SPA you need to have some global bootstrap functions like window.init() in the script. You need to run bootstrap functions on script load. Full script cannot be run in soft SPA.

0 replies

oliver-daniel · 2023-06-07T16:52:02Z

oliver-daniel
Jun 7, 2023

Necro'ing this thread to confirm it's still an issue in v13.2.x and beyond -- none of the fancy useEffect hacks worked to get a script with the same src, but different data parameters, to reload when navigating between pages with the same routing. The only thing that worked was changing all of the links available on one form page, which led to the others, back to <a> tags from <Link>s and forcing a hard reload on navigation.

1 reply

Bikbokken Jun 15, 2023

Thank you for sharing this! This works as intended!

MuhammedQuresh · 2023-09-07T10:53:38Z

MuhammedQuresh
Sep 7, 2023

Has anyone found a solution?

0 replies

MuhammedQuresh · 2023-09-07T13:03:17Z

MuhammedQuresh
Sep 7, 2023

Found a solution

Create a scripts loaded component

`import React, { useEffect, useRef } from 'react';

const ScriptLoaded = () => {
const scriptsRef = useRef([]);

useEffect(() => {
// Generate a new random value for cache busting
const randomValue = Math.round(Math.random() * 100);

// Define the list of script URLs to load
const scriptUrls = [
  `/static/vendors/modernizr.min.js`,
  //`/static/vendors/jquery.min.js`,
  `/static/vendors/jquery-ui/jquery-ui.min.js`,
  `/static/vendors/bootstrap/js/bootstrap.min.js`,
  `/static/js/theme-vendors.js`,
  `/static/js/theme.min.js`,
  `/static/vendors/imagesloaded.pkgd.min.js`,
  `/static/vendors/anime.min.js`,
];

// Create a promise for each script loading operation
const loadScript = (src) => {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    script.onload = resolve;
    script.onerror = reject;
    document.body.appendChild(script);
    scriptsRef.current.push(script);
  });
};

// Load jQuery first and then load the other scripts
loadScript(`/static/vendors/jquery.min.js`)
  .then(() => {
    return Promise.all(
      scriptUrls
        .filter((url) => url !== `/static/vendors/jquery.min.js`)
        .map((url) => loadScript(url))
    );
  })
  .catch((error) => {
    console.error('Error loading scripts:', error);
  });

// Cleanup - Remove scripts loaded for the previous page
return () => {
  scriptsRef.current.forEach((script) => {
    if (document.body.contains(script)) {
      document.body.removeChild(script);
    }
  });
  scriptsRef.current = [];
};

}, []);

return

;
};

export default ScriptLoaded;
`

import the component in _app.js

`// pages/_app.js
import React, { useEffect } from 'react';
import { AppProps } from 'next/app';
import ScriptLoaded from '../components/script';

import 'public/static/vendors/liquid-icon/liquid-icon.min.css';
import 'public/static/vendors/font-awesome/css/font-awesome.min.css';
import 'public/static/css/theme-vendors.min.css';
import 'public/static/css/theme.min.css';
import 'public/static/css/themes/creative.css';
import 'public/static/css/hcl-fleet.css';
import router, { useRouter } from 'next/router';

function MyApp({ Component, pageProps }: AppProps) {
const router = useRouter();
return (
<>
<Component {...pageProps} />

</>
);
}

export default MyApp;
`

1 reply

NandaKyaw01 Sep 16, 2023

Yeah it work!!!! And this is Nextjs 13 with app directory / app router
It reload js script files when route change with pathname useEffect parameter

'use client'
import { useEffect } from 'react'
import { usePathname } from 'next/navigation'

export default function ScriptLoaded() {
  const pathname = usePathname()
  useEffect(() => {
    // Generate a new random value for cache busting
    // const randomValue = Math.round(Math.random() * 100)

    // Define the list of script URLs to load
    const scriptUrls = [
      '/assets/js/vendor/modernizr-3.6.0.min.js',
      '/assets/js/vendor/jquery-3.6.0.min.js',
      '/assets/js/vendor/bootstrap.bundle.min.js',
      '/assets/js/plugins/slick.min.js',
      '/assets/js/plugins/countdown.min.js',
      '/assets/js/plugins/nice-select.min.js',
      '/assets/js/plugins/jqueryui.min.js',
      '/assets/js/plugins/image-zoom.min.js',
      '/assets/js/plugins/imagesloaded.pkgd.min.js',
      '/assets/js/plugins/ajaxchimp.js',
      '/assets/js/main.js',
    ]

    // Create a promise for each script loading operation
    const loadScript = (src: string) => {
      return new Promise((resolve, reject) => {
        const script = document.createElement('script')
        script.src = src
        script.async = true
        script.onload = resolve
        script.onerror = reject
        document.body.appendChild(script)
      })
    }

    // Load jQuery first and then load the other scripts
    loadScript('/assets/js/vendor/jquery-3.6.0.min.js')
      .then(() => {
        return Promise.all(
          scriptUrls
            .filter((url) => url !== '/assets/js/vendor/jquery-3.6.0.min.js')
            .map((url) => loadScript(url))
        )
      })
      .catch((error) => {
        console.error('Error loading scripts:', error)
      })
  }, [pathname])

  return null
}

and this is my layout file

import Footer from '@/components/footer'
import MainNavbar from '@/components/main-navbar'
import ScriptLoaded from '@/components/navigation-event'
import { navbarConfig } from '@/config/nav-bar'
import type { Metadata } from 'next'
import '../assets/css/plugins/animate.css'
import '../assets/css/plugins/jqueryui.min.css'
import '../assets/css/plugins/nice-select.css'
import '../assets/css/plugins/slick.min.css'
import '../assets/css/style.css'
import '../assets/css/vendor/bootstrap.min.css'
import '../assets/css/vendor/font-awesome.min.css'
import '../assets/css/vendor/pe-icon-7-stroke.css'

export const metadata: Metadata = {
  title: 'Jewelry Shop',
  description: 'You can buy jewelry as much as you want',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {

  return (
    <html lang="en">
      <head>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <link
          href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,900"
          rel="stylesheet"
        />
      </head>
      <body>
        <MainNavbar items={navbarConfig.mainNav} />
        {children}
        <Footer />
        <ScriptLoaded />
      </body>
    </html>
  )
}

Thanks Brother

douglasrcjames · 2023-09-16T20:53:34Z

douglasrcjames
Sep 16, 2023

I have been running into this issue when loading iframes from external scripts such as a ticket buyer at DICE events and a SweepStakes iframe script from SweepWidget. This makes the <Script /> tag almost unusable on production because it gives such a terrible UX... none of the fixes above seem straight forward and I am worried it would just cause more issues. Currently my solution is to just present a button to reload the page if the user doesn't see anything. Would love to get the Script feature working properly with Next.js 13!

7 replies

NandaKyaw01 Sep 17, 2023

Yeah I already test with Script tag and also with old pages route system and any other ways that I think of
But none of them work properly
Yes js file does load, but when you navigate around you lose your third party js.
This is the only solution if you don't use a tag instead of nextjs Link tag
a tag reload the page so what is the point of using react or nextjs right?

And also this is not a ton of code
Just an old way of creating html tag using vanilla js

const loadScript = (src: string) => {
      return new Promise((resolve, reject) => {
        const script = document.createElement('script')
        script.src = src
        script.async = true
        script.onload = resolve
        script.onerror = reject
        document.body.appendChild(script)
      })
    }

douglasrcjames Sep 17, 2023

gotcha, it seems to be working better, but am getting a ReferenceError: document is not defined in my server logs. Any idea how to fix that?

douglasrcjames Sep 17, 2023

I think I misread the intention of this thread, and sounds like I should start another thread as this original issue was with the <script /> tag not the next.js 13 <Script /> tag!

However, @NandaKyaw01 your solution did help temporarily solve this, but only for one of my scripts that had a function used in the onLoad function (dice.fm tickets widget), and didn't work for my script that just ran an external script to render something in a div (SweepWidget)

douglasrcjames Sep 17, 2023

Here's my new question if anyone else runs into a similar issue: #55506

NandaKyaw01 Sep 17, 2023

Script not defined error
Reference error
I suppose you have many js files
One of your js file run before initialize

For example - your need to load j query file first in order to run my own script files

akash-anadey · 2023-11-08T20:25:43Z

akash-anadey
Nov 8, 2023

I faced the same issue while I was implementing the AfterShip tracking widget. Here's the solution that worked for me:

useEffect(() => {
        if (!router.isReady) return

        const script = document.createElement('script');

        script.src = 'https://button.aftership.com/all.js?username=XXXXXXXX';
        script.async = true;

        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        };
}, [router.asPath, router.isReady]);

0 replies

Merton · 2023-11-15T18:20:40Z

Merton
Nov 15, 2023

When using Next app router and server rendered components, I found this approached fixed the issue:

Wrap your script / embed logic into a component, and import that into your page.
Keep the page as a server component (ie, no use client)
For the script component, this needs to be a client rendered component, so add use client at the top. And add @Akifcan 's random Math.random() to your src.

Mini example which fetches data server side:

// Page.tsx
async function getData(): Promise<any> {
  const data = await fetch(...)

  return data
}

export default async function MyPage() {
  const data = await getData();

  return (
    <div>
        <div>
            <MyScriptComponent />
        </div>
    </div>
  );
}

// MyScriptComponent.tsx
'use client';

import Script from 'next/script';

export const MyScriptEmbed = () => {
  return (
    <div>
      <div id="myEmbedDiv"></div>
     <Script src={'path/or/url/to/script.js?v=' + Math.random() * 999} />
    </div>
  );
};

4 replies

<script> tag not working on page change, only on initial load and reload #17919

Replies: 17 comments · 48 replies

Replies: 17 comments 48 replies