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.

Sign up for GitHub

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

Jump to bottom

useHead doubling the baseURL only when served from that domain #27240

Closed
boulderwebdev opened this issue May 15, 2024 · 3 comments
Closed

useHead doubling the baseURL only when served from that domain #27240

boulderwebdev opened this issue May 15, 2024 · 3 comments
Labels
3.x closed-by-bot needs reproduction pending triage

Comments

@boulderwebdev
Copy link

Environment

  • Operating System: Windows_NT
  • Node Version: v20.11.1
  • Nuxt Version: 3.11.2
  • CLI Version: 3.11.1
  • Nitro Version: 2.9.6
  • Package Manager: npm@10.2.4
  • Builder: -
  • User Config: devtools, runtimeConfig, app, ssr, modules, nitro, devServer, content, googleFonts, experimental
  • Runtime Modules: @nuxtjs/google-fonts@3.2.0, @nuxtjs/tailwindcss@6.11.4, unplugin-icons/nuxt, @nuxt/content@2.12.1
  • Build Modules: -

Reproduction

How I'm configuring this

For my index.vue page, I have the following code

import _ogImage from '~/assets/img/open-graph-banner.jpg'
const config = useRuntimeConfig()

const ogImageUrl = new URL(config.public.baseUrl) // could also use https://mydomain.com/ as a string here
ogImageUrl.pathname = _ogImage
const ogImage = ogImageUrl.toString()

useHead({
  meta: [
    { property: 'og:image', content: ogImage },
  ]
})

I describe the bug in detail below, but in short, if I access the rendered page on https://mydomain.com, and only on this page, will I get a meta tag like

<head>
  <meta property="og:image" content="https://mydomain.com/https://mydomain.com/_nuxt/open-graph-banner.so1_sba.jpg" />
</head>

Note on both localhost and the view-source pages the meta tag is rendered correctly.

Describe the bug

Short description

Okay, so I want to have open graph tags which include my domain in the path when using useHead both in my page's pre-render and when the page is rendered after being served. What I mean is I should have in my <head>

<head>
  <meta property="og:image" content="https://mydomain.com/_nuxt/open-graph-banner.so1_sba.jpg">
</head>

for both the pre-render, so it should display this tag on view-source:https://mydomain.com, on https://mydomain.com, and when I'm running it locally on http://localhost:3000. Unfortunately, this is not what's happening. Let me give you the displayed HTML for each of the cases

view-source:https://mydomain.com

<head>
  <meta property="og:image" content="https://mydomain.com/_nuxt/open-graph-banner.so1_sba.jpg">
</head>

https://mydomain.com <- problems here

After the page finishes loading and I look in the console, I get

<head>
  <meta property="og:image" content="https://mydomain.com/https://mydomain.com/_nuxt/open-graph-banner.so1_sba.jpg">
</head>

http://localhost:3000

This tag holds both in the view-source and in the dev tools console

<head>
  <meta property="og:image" content="https://mydomain.com/_nuxt/open-graph-banner.so1_sba.jpg">
</head>

Additional comments

This inconsistent behavior is so frustrating, and I cannot guarantee my open graph tags will be loaded in the same way every time. On twitter, sometimes the open graph tag loads correctly, other times it will not.

Additional context

No response

Logs

No response
@danielroe
Copy link
Member

This is likely an inconsistency between server + client behavior. But you also don't need this on the client. Would you try using useServerHead, or just wrapping the whole set of code in if (import.meta.server) { /* */ }?

@github-actions GitHub Actions
Copy link
Contributor

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz
👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

@github-actions GitHub Actions
Copy link
Contributor

This issue was closed because it was open for 7 days without a reproduction.

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale May 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
3.x closed-by-bot needs reproduction pending triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@danielroe @boulderwebdev