vercel / next.js

The React Framework
https://nextjs.org
MIT License
126.99k stars 26.99k forks source link

<Script /> component not working on route change #57023

Open douglasrcjames opened 1 year ago

douglasrcjames commented 1 year ago

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/inspiring-moore-jgg9v2

To Reproduce

Generally just navigating back and fourth between pages via tags and eventually landing on the "services" page will fail to load the Twitter script. This issue can be reproduced with all external scripts I have tried. If you simply forced the browser refresh, the script will load fine.

  1. Starting at base homepage path, click Go to about page
  2. Click go to services (script loads)
  3. Click go to about
  4. Click go to services (script not loaded)
  5. Twitter script (or any script) should load, but only loaded if you refresh page

Current vs. Expected behavior

Currently Script loads on the initial load of the route, but doesn't load if you leave the route then return the route with the script. Expected that the script should be loaded without the need to refresh the page manually with the browser button, and on every route changes via Links not just the first load.

Verify canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 18.18.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 13.5.6-canary.6
  eslint-config-next: 13.4.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Routing (next/router, next/navigation, next/link), Script optimization (next/script)

Additional context

I have tested a bunch of solutions, such as loading the Script inside the layout component as suggested here, but still no dice. I have tried every strategy prop from the docs, and all the same result. This has worked with 4 different external scripts from different websites (Twitter, Instagram, DICE, and SweepWidget). There's a chance I am misusing the Githubissues.

  • Githubissues is a development platform for aggregating issues.