New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
next/head removing injected scripts #11012
Comments
I'd like to bump this issue as it's causing a problem for us too. We have a 3rd party chat bot on our application that injects a script into the head. On initial load, the script is getting wiped since we are using in a base component. If the user refreshes the page, the chat bot then works since I assume the cached server-rendered page gets pulled and the client-side component then can successfully inject into the head without getting wiped. |
@mitchell-bu Don't know what the difference is tbh, but we got around the issue by moving our 3rd party script to |
Yea, not sure that's really going to be an option for us. Interestingly, discovered that this was introduced in the 9.0.3 version. 9.0.2 doesn't have this problem. |
I'm fairly certain this is the PR that introduced this problem, which was opened by @devknoll : https://github.com/zeit/next.js/pull/8020/files I frankly don't entirely follow what this is trying to do so I'm not really able to suggest a fix. We ultimately found a workaround using dynamic imports to delay importing the component that injects into the head until the client renders. |
Document is not parsed the same way. Document is SSR only, passing script tags through React does not work because the react parser does not accept scripts. The head manager does seem to have a cleanup step, but it does not seem to write scripts back to the page beyond what is flushed out of webpack initially. |
this problem was introduced by e68307d#diff-6d15c59f75bd4f8cdcbd29588c610545 to fix the SEO problems in #3494. that makes sense, however, the new implementation is tenuous. I think it's better to go back to a system where you have an explicit handle on which elements were added by Next. instead of classes, you could use data attributes. i have never seen an SEO problem with using those to manage HEAD tag reconciliation. is it possible to offer reconciliation based on data attributes as an experimental feature? my team would be glad to try it out. i think it would resolve our issues and we would be able to validate that SEO is unaffected by data attributes. |
@wawjr3d solution sounds great. And based on documentation on data-attributes (https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes), the SEO crawler will not index values from data-attributes. |
have this issue too! commenting for exposure. was trying to add a script tag for tracking and was trying to figure out what was going on |
Have a similar issue too, but for styles which are injected by another script of ours. Imagine could be the same root cause so wanted to add a comment here as it seems like not just |
Is there an update on this? For a project I've implemented Dynamic Yield which injects styles into the head that are overwritten. I've put the Dynamic Yield scripts right in the body before the content which solves the issue of the injected styles being overwritten but in turn affect how data is being shared with Dynamic Yield. The workaround provided in the comments here resulted in some other data sharing issues. |
This still seems to be an issue. |
If anyone is stuck on this, you could monkey patch it, assuming the function is exported. Require.cache[require.resolve(file)].exports = your own code |
Google Tag Manager snippet code was inserted in my case at the end of other meta tags, which caused the same problem. |
This comment was marked as off-topic.
This comment was marked as off-topic.
I've had the same problem when adding content to the head, coming from a WordPress Seo Plugin(Yoast). In my case, I was not adding a script, but a component where I was parsing this content. The content was not completely removed, but still partly shown in the head. I could solve the problem by not using a component to parse the Seo head, but parsing it directly within the I've reproduced the issue in the repo below. |
Related: #37747 I think it would require core maintainers to solve it. |
still an issue in 12.3.0 |
Not sure about next. But in webpack we inject the script then remove it to prevent memory leaks. If the script registers a global, does it matter if the Js tag is still there or not? Since it’s in memory |
@mitchell-bu mind sharing the details of your dynamic import work-around? I am also encountering this with a <script> that adds a third-party script to the |
thanks for this tip @skmohammadi! In my case the third-party script was being inserted before the first |
I must confirm that issue. We have third party script that dynamically inserts |
we see this issue with StencilJS injected |
I understand what happens as follows:
but there's a buggy implementation in place:
That does not play nice with
|
For anyone looking for a quick workaround, we've been using the following for the last half a year or so, and so far had no visible issues. All pages return their unique ID in
|
I can repro in |
This adds an `experimental.strictNextHead` flag to allow updating head tags tracking for pages to resolve the issue with runtime scripts being appended to the head element breaking the head tracking. Fixes: #11012 Fixes: #20682 x-ref: [slack thread](https://vercel.slack.com/archives/C051B8JAPQ9/p1680156608831939)
This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Bug report
Describe the bug
next/head is removing scripts added into head. This issue is currently causing the removal of scripts injected by our third-party tag manager.
To Reproduce
https://github.com/bmathews/nextjs-head-issue
Include a script in
<Head />
that adds another script synchronously.Expected behavior
next/head doesn't remove dynamically added scripts
Screenshots
I added "break on subtree modifications" to head. During hydration, before next/head performed removal, you can see the script
console.log('_index log')
During removal,
oldTags
value in head-manager.js is containing that script:After removal,
console.log('_index log')
is no longer there.System information
The text was updated successfully, but these errors were encountered: