Inline Next/Script only runs on first page load

dquilter commented 2 years ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:28:41 PST 2021; root:xnu-8019.61.5~1/RELEASE_ARM64_T6000
Binaries:
  Node: 16.13.0
  npm: 7.15.1
  Yarn: 1.22.18
  pnpm: N/A
Relevant packages:
  next: 12.2.3
  eslint-config-next: N/A
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

Chrome 103.0.5060.134 (Official Build) (arm64)

How are you deploying your application? (if relevant)

No response

Describe the Bug

An inline script (using Next Script) will only run the first time the page is visited. If the user navigates internally to other pages and then comes back to the original page (again, via internal navigation), the script will not run a second time.

<Script
  strategy="lazyOnload"
  dangerouslySetInnerHTML={{ __html: `console.log('Log dangerously')` }}
  id="unique-1"
/>

<Script strategy="lazyOnload" id="unique-2">
  console.log(`Log`)
</Script>

Tested using the lazyOnload, beforeInteractive and afterInteractive strategies.

Removing the ID attribute from Script results in the script being run on subsequent page loads.

Expected Behavior

Whenever a page is visited, inline scripts will be run, regardless of whether the page has already been visited in that session.

Link to reproduction

https://stackblitz.com/edit/nextjs-vyvasp?file=pages/index.js

To Reproduce

Open link https://stackblitz.com/edit/nextjs-vyvasp?file=pages/index.js
Open Dev Tools console.
Refresh the page (notice console.logs)
Navigate to Subpage one (notice console.logs)
Navigate to Subpage two (notice console.logs)
Navigate to any other page (notice only logs for Scripts with no ID)

(Scripts are located in Navigation component; there are a number from previous testing that have been commented out to reduce console noise.)

dalalRohit commented 2 years ago

https://nextjs.org/docs/basic-features/script#executing-code-after-mounting-onready

onReady prop, this will help ;)

natBizitza commented 1 year ago

https://nextjs.org/docs/basic-features/script#executing-code-after-mounting-onready

onReady prop, this will help ;)

I see, this can solve it. The method is called every time the component is mounted. I just don't know what to call there, force the page to refresh? The script is already loaded, but I need to run it again on re-navigation.

JasonA-work commented 1 year ago

I have the same issue as natBizitza and the same questions as hers too. Any suggestions anyone?

I have a reproduction of the issue here using the the pages router: https://github.com/JasonA-work/tidycal-next-js-embed-error

It's hosted on Vercel, so you can verify the error here: https://tidycal-next-js-embed-error.vercel.app/

I've also tried this with the app router, and the iframe from the script doesn't load at all no matter how I try to manage it.

JasonA-work commented 1 year ago

@leerob

We've been stuck with not being able to use third-party widgets and such for a while because of this. We have reproductions available for the team to check out too.

Thank you so much!

BSeipler commented 1 year ago

Doing a re-write of our application at work and am running into this issue. I've used many suggestions, but nothing works. I hope they will address it soon.

SamKomesarook commented 1 year ago

Upping this: we require a third-party script to initialise a widget on a few of our pages, but navigating within the app to those pages does not run the script after the first instance.

PandaPandaDev commented 11 months ago

We're also experiencing this when loading a script that shows a cookiebanner. Once is fine, but it disappears on navigation. Any solutions to this?

zamson commented 11 months ago

Same issue here trying to use an inline subscription widget. How are we supposed to use onReady? It only refers to external scripts, mine is inline and has no init call.

mhadikazemian commented 11 months ago

Having the same issue ...

DamienLopvet commented 6 months ago

Same issue here, Using Tidycal cdn script to display calendar (the only way provided to embed calendar from tidycal). the script load and display the content on first page load but after navigating to other pages in the app and coming back, the html content injected by the script is not there anymore.

dnyn92 commented 4 months ago

We are also running into the same issue. Making the script load every time should be default as it's expected with Vanilla JS.

vercel / next.js