Head scripts are reappended and reexecuted on navigation #381

guanzo · 2019-05-27T01:08:21Z

Version

2.7.1

Reproduction link

https://github.com/guanzo/codesandbox-nuxt

Steps to reproduce

$ git clone https://github.com/guanzo/codesandbox-nuxt nuxtbug
$ cd nuxtbug
$ npm i
$ npm run generate
$ npx http-server dist

Open the webpage and dev tools, go to the Elements tab, expand the <head> node

Note the position of the element

<script data-n-head="true" src="https://arc.io/widget.js?MURGrEjPmB6gVvzyvpbDut" async=""></script>

Note the element <div id="arc-widget"></div> at the bottom of <body>. This element is created when the arc.io/widget.js script is loaded.

Click the "test" link

The <head> is updated and the script has been appended to the bottom of <head>, causing it to execute again, and now there are 2 #arc-widget elements.

What is expected ?

A script is loaded once across all navigations.

What is actually happening?

A script is loaded twice across all navigations.

Additional comments?

Related to nuxt/nuxt#3396.

This only occurs when each nuxt page has its own title. When nuxt updates the page title on navigation, the script is reappended. The hid attribute on the script tag doesn't fix it.

_{This bug report is available on Nuxt community (#c9269)}

The text was updated successfully, but these errors were encountered:

rchl · 2019-05-30T22:01:18Z

@pimlie

Script in generated page has this outerHTML:

<script data-n-head="true" src="..." async></script>

while dynamically created script has this:

<script data-n-head="true" src="..." async="true"></script>

so then those fail isEqualNode check in here:

vue-meta/src/client/updaters/tag.js

Line 63 in 2775c2d

return newElement.isEqualNode(existingTag)

because async attribute value is different.

SSR page when using npm run dev works fine (has async="true" in source).

pimlie · 2019-06-05T17:20:21Z

@guanzo I am afraid I cant reproduce this on csb. As in the widget.js script doesnt move to the end of head, for me it stays at the same position as after the page has loaded and the div is only listed once.

@rchl Please try the rc for vue-meta v2 as that should be fixed in v2

rchl · 2019-06-06T21:19:56Z

@pimlie But I don't think you can reproduce that on CSB as this bug only reproduces with nuxt generate. I've created maybe more clear version of original repro at https://github.com/rchl/nuxt-generate-meta-bug . You could give it a try maybe? Need to follow instructions in the readme.

And sorry but I haven't tested v2 rc as I have troubles figuring out how to plug in that version into existing dependencies. Tried linking vue-app and vue-renderer from my local nuxt checkout but got Unexpected token export errors.

pimlie · 2019-06-06T21:29:38Z

You can install v2rc by running yarn add vue-meta@next (npm lists all available tags for a package you can use on the XX Versions tab here: https://www.npmjs.com/package/vue-meta)

I actually did run the generate on csb. I couldnt add extra yarn scripts it seems so I first ran yarn generate, then I changed the generate script in package.json to be the npx command (and added -p 3000) then deliberately added an error to nuxt.config so nuxt dev would fail to run (and port 3000 was available), clicked on yarn generate which now started the http-server et voila :)

rchl · 2019-06-06T21:33:24Z

@pimlie but yarn add vue-meta@next doesn't override vue-meta sub-dependencies of vue-app and vue-renderer as far as I can see. It will just install hoisted version but nothing will use it.

Or am I wrong? I can still see references to vue-meta v1.6.0 in generated files at least.

pimlie · 2019-06-06T21:44:16Z

The quickest way to check if you are running v2 is load your Nuxt app in the browser and check window.$nuxt._vueMeta. If that exists (and is an object) then you are using v2.

rchl · 2019-06-06T21:47:13Z

window.$nuxt._vueMeta exists and is an object but bug still reproduces.

rchl · 2019-06-06T21:50:35Z

And actually with v2 it reproduces both when using yarn generate and yarn dev while with v1 it only reproduces with yarn generate.

pimlie · 2019-06-06T22:01:18Z

Transferred this to vue-meta repo as it appears to be a vue-meta bug indeed.

More strangely, apparantly I even deliberately 'fixed' the tests to include this difference: https://github.com/nuxt/vue-meta/blob/master/test/utils/meta-info-data.js#L127

Will have a look tomorrow whether that was just a brain fart or that there was more to it.

pimlie · 2019-06-07T08:23:42Z

This should be fixed now. Seemed to just have been an oversight, not a brain fart as so much ;)

(fix will be released this weekend)

snapwich · 2019-06-22T01:49:54Z

Hi @pimlie,

After much struggle I've decided with about 99% certainty that this bug is what is causing this other bug: nuxt-modules/google-adsense#16

The google adsense code placed in the head is ran once in dev mode but with nuxt generate code it runs once on load and once when navigating to another page but then no more after that. Running twice in those situations breaks the adsense module for pages rendered from nuxt generate

I used yarn to resolve vue-meta to 2.0.3 (latest) and confirmed that window.$nuxt._vueMeta exists and is an object but the problem still exists. If this is the same bug (which I think it is) then I don't think it has been fixed.

amritk · 2019-08-23T03:34:56Z

Hmm I think I'm running into this issue right now with nuxt build --spa. Was the fix released?

Edit: I will create a new issue

bengineer19 · 2020-04-11T10:35:02Z

@snapwich I agree.

I initially had the issue with npm run dev but after updating nuxt, everything now works fine in dev mode (and also npm run build && npm run start). However when statically generating using npm run generate, the problem still occurs.

I think this should be re-opened?

guanzo changed the title ~~Head scripts are reappended and therefore reexecuted on navigation~~ Head scripts are reappended and reexecuted on navigation May 27, 2019

pimlie transferred this issue from nuxt/nuxt Jun 6, 2019

pimlie added bug target: v2 labels Jun 6, 2019

pimlie closed this as completed in eb4980c Jun 7, 2019

simonbrent mentioned this issue Dec 5, 2019

Head script is added multiple times on navigation #498

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Head scripts are reappended and reexecuted on navigation #381

Head scripts are reappended and reexecuted on navigation #381

guanzo commented May 27, 2019

rchl commented May 30, 2019

pimlie commented Jun 5, 2019 •

edited

Loading

rchl commented Jun 6, 2019

pimlie commented Jun 6, 2019

rchl commented Jun 6, 2019

pimlie commented Jun 6, 2019

rchl commented Jun 6, 2019

rchl commented Jun 6, 2019

pimlie commented Jun 6, 2019

pimlie commented Jun 7, 2019 •

edited

Loading

snapwich commented Jun 22, 2019

amritk commented Aug 23, 2019 •

edited

Loading

bengineer19 commented Apr 11, 2020 •

edited

Loading

Head scripts are reappended and reexecuted on navigation #381

Head scripts are reappended and reexecuted on navigation #381

Comments

guanzo commented May 27, 2019

Version

Reproduction link

Steps to reproduce

What is expected ?

What is actually happening?

Additional comments?

rchl commented May 30, 2019

pimlie commented Jun 5, 2019 • edited Loading

rchl commented Jun 6, 2019

pimlie commented Jun 6, 2019

rchl commented Jun 6, 2019

pimlie commented Jun 6, 2019

rchl commented Jun 6, 2019

rchl commented Jun 6, 2019

pimlie commented Jun 6, 2019

pimlie commented Jun 7, 2019 • edited Loading

snapwich commented Jun 22, 2019

amritk commented Aug 23, 2019 • edited Loading

bengineer19 commented Apr 11, 2020 • edited Loading

pimlie commented Jun 5, 2019 •

edited

Loading

pimlie commented Jun 7, 2019 •

edited

Loading

amritk commented Aug 23, 2019 •

edited

Loading

bengineer19 commented Apr 11, 2020 •

edited

Loading