Next.js: Normal scripts "<script>" not working after page navigation

[parthlogicwind]

Hi, I am facing a problem with scripts.
I have included normal scripts in NextJS with tag.
Normal scripts are working when the page is accessed for the first time or reloaded. It's not working when I navigate to any other page.
I have even tried with simple alert, but it is still not working. It's only working when the page is opened for the first time or on reload.
I have even try to include scripts in _document.js file but still same issue.

Is there any other way to access or recall scripts when I navigate the page? Please help

[timneutkens]

I'm not sure how to help without an example. Also following the issue template this should be posted on https://spectrum.chat/next-js

[parthlogicwind]

Hi, @timneutkens
I have created a repo for the example, Please check
https://github.com/parthlogicwind/NextJs-Demo

I am using Bootstrap template to implement a site in NextJs.

The issue is scripts are working when the page is accessed for the first time or reloaded. It's not working when I navigate to any other page.

[kilowattkris]

@parthlogicwind did you ever find a fix for this? I'm experiencing the same issue. Thanks!

[kilowattkris]

@parthlogicwind I found a fix. Not sure which script you're using, but my issue was that the bootstrap init occurred on $(document).ready, which only fires on the page reloads. I instead moved the init process into a function I could call whenever a new page is loaded. Not sure if this is the best solution, but it fixes the issue! Hope you were able to resolve your issues too!

[johndevor]

Also having this issue

[pooladkhay]

Same problem!
Please help...

[aesthytik]

did anyone found the fix? please help

[oyatek]

me too

[eldyvoon]

Same problem here, you have to click back, go to the same page again, then the ssr loaded instance will available on other pages, it's just weird.

[pooladkhay]

One solution is to install “loadjs” and load js files manually in “componentDidMount”.
I ended up writing this code in every class I used:

componentDidMount() {
loadJs(“/path/to/js/file.js”);
}

[eldyvoon]

I've decided to inject the script in component level rather than pages level, I used this package in componentDidMount

https://www.npmjs.com/package/postscribe

[nfmshow]

This worked for me

import Safe from "react-safe"
// in render

{
try{Typekit.load({ async: true });}catch(e){}
}

https://stackoverflow.com/questions/34424845/adding-script-tag-to-react-jsx

[rywils21]

Just came across this and was able to solve it using the StackOverflow answer @nfmshow linked with the updated answer. I needed to insert the script tag within the dom, not just on the body. (For inserting a convertkit form)

Created this hook:

import { useEffect, RefObject } from "react";

export const useScript = (
  url: string,
  ref: RefObject<HTMLDivElement>
) => {
  useEffect(() => {
    const script = document.createElement("script");

    script.src = url;
    script.async = true;

    if (ref.current) {
      ref.current.appendChild(script);
    }

    return () => {
      ref.current.removeChild(script);
    };
  }, [url, ref]);
};

And then used it in a component:

import { useRef } from "react";
import { useScript } from "../hooks/useScript";

export function ScriptInsertion() {
  const ref = useRef<HTMLDivElement>(null);
  useScript(
    "script-url",
    ref
  );

  return <div ref={ref}></div>;
}

[Arpitgoyalgg]

I have been working on this issue for a long time now and I have found that external script tags only load once and then there is no interactivity. So the only fix is to use react js instead of vanilla javascript or jquery.

[jagrajbains]

Did anyone find a solution to get the scripts working? I have 4 external js files which somehow don't execute when I load the page first time. I checked the html and it is being added at the bottom but, the code isn't executed untill I paste and run the whole code from the file into the console.