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.

[vinlegend1]

The way I fixed this was to create a function doThing() and copy paste the code from the js files. (Although I'm not sure how jquery fares well with this solution)

export const doThing = () => {
// the js file in here
}

then in your components, use componentDidMount or useEffect hook to call the doThing() function and it will run all the document.querySelector and those jazz...

• An important note is probably to not include things like document.addEventListener("DOMContentLoaded", () => {...}) or the equivalent in jquery Although, I haven't tested refactoring everything to the _app.js or _document.js... I guess y'all can try it out :)

[Ramekici]

I have put in _document.js in body part as a script, if ı used <a tag the jquery and javascript files works, but if ı used next/link it doesnt work, anyone has any idea

[yashrabari]

I am also getting same issue

[ekoydakoykoy]

how did you guys fix this?

[surjithctly]

I have tried with the different strategy used in next/script in v11 but still, it doesn't work.

If anyone managed to solve this, could you please comment how?

[kushankurxd]

use <a/> tag for routing instead of <Link/> on the pages you want to load external <script/>

worked for me 🎉

[surjithctly]

@kushankurxd Yup, that's a good option.

In my case, I solved it by contacting the plugin author and they added an option to listen for DOM changes and provide an option to call their window.function so I could initiate it on next/script onLoad function. It worked for me.

[emondhar]

Need help here!

[samplep182]

Still facing the same issue in 2022! Any idea why this is not working? And why did this get closed? Using Nextjs v12.0.8 and React v17.0.2, and trying to use a script in the public folder.

An insight beyond the docs (which contain nothing on this as far as I read and understood) on how NextJs is working with scripts and loading them would be really helpful.

In my case: scripts are loading on refresh or when first entering the page, but if I navigate away and then come back, they stop working. They are still in the head or body (whichever I import the scripts into) when inspecting, but they are not active.

When I tried using strategy="beforeInteractive" on the Githubissues.

Githubissues is a development platform for aggregating issues.