Open aloeugene opened 1 year ago
Just for a little bit of context for the potential "why the hell would anybody do that?" questions.
I'm working on implementing an online news media website and it sometimes requires doing weird things with ad providers' scripts in order for them to integrate correctly with out Next.js application. This is one of the behaviors we need to support in order for ad provider scripts to work correctly between SPA-specific page navigations.
Requirements here are:
<Script>
-implemented script from the page before navigating away, as this script and other dynamically added ones are only intended for this one page;<Script>
back, as well as other dynamically added scripts after that one;For now, I had to implement it via an ugly custom React hook that handles adding/removing the regular html <script>
element to the page via useEffect
means. It's kinda sad to look at and I'd like to just be able to use an out-of-the-box solution which takes 2-3 lines instead of the 30+ lines hook...
Verify canary release
Provide environment information
Which area(s) of Next.js are affected? (leave empty if unsure)
Script optimization (next/script)
Link to the code that reproduces this issue
https://codesandbox.io/p/sandbox/naughty-meitner-jlzxub?file=%2Fpages%2Findex.tsx
To Reproduce
Steps to reproduce are inserted into the linked codesandbox.
In short:
<Script>
-implemented script to the DOM when initial/home page mounts.router.events.on('routeChangeStart')
) remove the script from step 2 via vanilla JS code (document.body.removeChild(...)
).Describe the Bug
When navigating between app routes,
<Script>
-implemented scripts are not being added to the DOM if they were removed via vanilla JS means (e.g.document.body.removeChild(...)
) before route switch.Expected Behavior
When navigating between app routes,
<Script>
-implemented scripts should be added to the DOM if they were removed via vanilla JS means (e.g.document.body.removeChild(...)
) before route switch.Which browser are you using? (if relevant)
Arc (Version 0.96.0 (38004)), Chromium Engine Version 111.0.5563.146
How are you deploying your application? (if relevant)
No response