Skip to content
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

Loading external scripts using head property inside component doesn't load the script if server side rendered #6005

Closed
arihantdaga opened this issue Jun 29, 2019 — with CMTY · 9 comments
Assignees

Comments

Copy link

@arihantdaga arihantdaga commented Jun 29, 2019 — with CMTY

Version

v2.8.1

Reproduction link

https://jsfiddle.net/wbr3gunq/1/

Steps to reproduce

Add external scripts in head() method of the component.
Come to this page buy navigating from another page using nuxt-link. This will load the scripts. But if you hit Ctrl+R or reload the page, the scripts are not loaded.

What is expected ?

It should load external scripts when rendered server side or client side.

What is actually happening?

The external script tags are not loaded when page is rendered server side.

This bug report is available on Nuxt community (#c9433)
@cmty cmty bot added the cmty:bug-report label Jun 29, 2019
@pimlie pimlie added the need repro label Jun 29, 2019
@pimlie

This comment has been minimized.

Copy link
Member

@pimlie pimlie commented Jun 29, 2019

Could you please create a working reproduction of this issue on codesandbox that we can check?

@arihantdaga

This comment has been minimized.

Copy link
Author

@arihantdaga arihantdaga commented Jun 29, 2019

Yes sure. I'll create one and update.

@pimlie pimlie self-assigned this Jun 30, 2019
@TrueCarry

This comment has been minimized.

Copy link

@TrueCarry TrueCarry commented Jun 30, 2019

Offtopic, but you probably don't want to include scripts in head. You can add them to body inside no-ssr tag.

@arihantdaga

This comment has been minimized.

Copy link
Author

@arihantdaga arihantdaga commented Jul 6, 2019

@pimlie https://codesandbox.io/s/codesandbox-nuxt-rg5zj?fontsize=14.
In this example, i am trying to load an external javascript. So i kept it in the head() method of the component. But it is not loaded when rendered server side, and loaded only when rendered client side. (i.e - go to about page and then come back to home page).

@TrueCarry Thanks, I'll try that also. And i'll have to do the same for external css too i guess.

@pimlie

This comment has been minimized.

Copy link
Member

@pimlie pimlie commented Jul 8, 2019

Do I understand correctly you expect that temporary.js would also be loaded when you navigate to /about? If you need that then you should put head with temporary.js in the layout, not in de page component of index.

@pimlie pimlie added question and removed need repro labels Jul 8, 2019
@arihantdaga

This comment has been minimized.

Copy link
Author

@arihantdaga arihantdaga commented Jul 8, 2019

@pimlie No. I meant that temporary.js should be loaded in the index page. Not about page. But its not loading in the index page also if you reload the page and if the page is rendered from server side. It is loaded only if the page is rendered client side (i.e - go to any other page and come back on index page using navigation via nuxt-link, then it'll load temporary.js).

@pimlie

This comment has been minimized.

Copy link
Member

@pimlie pimlie commented Jul 8, 2019

Sorry, when I directly load the index of your repro it also loads temporary correctly:

image

@arihantdaga

This comment has been minimized.

Copy link
Author

@arihantdaga arihantdaga commented Jul 9, 2019

I checked it again. Its NOT loading. I'll post a screen recording video. Can you also please guide me where to look for the code of nuxtJs related to loading these scripts.

@stale

This comment has been minimized.

Copy link

@stale stale bot commented Jul 30, 2019

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

  1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
  2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

@stale stale bot added the stale label Jul 30, 2019
@stale stale bot closed this Aug 7, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.