SolidJS•5w ago

SolidStart Meta not updating

Per the docs, I tried to add meta tags to my website, I added the base <MetaProvider> and the fallback tags inside my <Router layout={}/> as seen below

      <MetaProvider>
        <Title>test</Title>
        <Meta name="description" content="test" />

        <Link rel="icon" href="/favicon.ico" />

        {navbarEnabled() && (
          <Navbar user={user()!} />
        )}

        <div class={styles.contentWrapper}>
          {props.children}
        </div>

        <Footer />
      </MetaProvider>

      <MetaProvider>
        <Title>test</Title>
        <Meta name="description" content="test" />

        <Link rel="icon" href="/favicon.ico" />

        {navbarEnabled() && (
          <Navbar user={user()!} />
        )}

        <div class={styles.contentWrapper}>
          {props.children}
        </div>

        <Footer />
      </MetaProvider>

From there, according to the docs or at least my understanding I should now be able to use <Meta> in a specific route and overwrite these, and so I did

  return (
    <>
      <Show when={data()}>
        <Title>{data().name}</Title>
        <Meta name="description" content={data().description} />
      </Show>

  return (
    <>
      <Show when={data()}>
        <Title>{data().name}</Title>
        <Meta name="description" content={data().description} />
      </Show>

Despite this, the tags seem to be creating multiple times, and not deleting the old ones. So in my document I have both the fallback tags and the page specific tags an whichever one displays seems to be random. Unsure where I messed up so any help would be greatly appreciated.

11 Replies

peerreynders•5w ago

See: https://github.com/solidjs/solid-meta/issues/34#issuecomment-1821621091 https://github.com/solidjs/solid-meta/pull/40#issuecomment-2049863006 and https://discord.com/channels/722131463138705510/1319379964050538559/1319381531390906491

GitHub

Meta tags with same name attribute but different other attributes...

For example, use the following two tags: <Meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" /> <Meta name="theme-color" m...

GitHub

Proposal: refactor the processing of meta elements by GoodbyeNJN · ...

As I said in this issue, I've rearranged the attributes that may appear on the meta element, as well as new test cases for the meta element. In the following, I have bolded some of the cont...

ChristianOP•5w ago

This issue occurs also for my titles which I don't think would be caused by that, though, that would've been an issue regardless just I didn't get to it yet. Infact nothing gets overwritten, they all persists. The titles, links, descriptions, etc.

peerreynders•5w ago

<Meta /> and <Title /> are the only "cascading" tags, all others are cumulative. - Meta tags currently dedupe on a compound key based on the content of the ["name", "http-equiv", "content", "charset", "media"] attributes; so in your example those meta tags are considered distinct as content becomes part of the key. - <Title /> components are supposed to override each other (cascade); but they will not override a <title> tag hard-coded in the entry-server.tsx <head> section which will be the first one (which is the one the browser will pick).

ChristianOP•5w ago

They're not overriding one another, they're all staying in the head and it's random which one displays is the issue. None are hard coded into the entry-server, below is nearly exactly my setup. Yet when I go to /test (in this example) it'll show the default title from Layout, and sometimes, maybe 10-20% of the time it'll display the data().name but ONLY when loading the page with initial SSR and never on client side page load.

export default createHandler(() => (
  <StartServer
    document={({ assets, children, scripts }) => (
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="icon" href="/favicon.ico" />
          {assets}
        </head>
        <body>
          <div id="app">{children}</div>
          {scripts}
        </body>
      </html>
    )}
  />
));

export default createHandler(() => (
  <StartServer
    document={({ assets, children, scripts }) => (
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="icon" href="/favicon.ico" />
          {assets}
        </head>
        <body>
          <div id="app">{children}</div>
          {scripts}
        </body>
      </html>
    )}
  />
));

app.tsx

return (
  <Router component={props => (
    <MetaProvider>
      <Title>Test Title</Title>
      {props.children}
    </MetaProvider>
  )}>
    <Route path='/test' component={TestPage}>
  </Router>
)

return (
  <Router component={props => (
    <MetaProvider>
      <Title>Test Title</Title>
      {props.children}
    </MetaProvider>
  )}>
    <Route path='/test' component={TestPage}>
  </Router>
)

testpage.tsx

  const [ data ] = createResource<FetchResponse>(() => params.id, fetchData, { deferStream: true });

  return (
    <>
      <Show when={data()}>
        <Title>{data().name}</Title>
        <Meta name="description" content={data().description} />
      </Show>
    <>
  )

  const [ data ] = createResource<FetchResponse>(() => params.id, fetchData, { deferStream: true });

  return (
    <>
      <Show when={data()}>
        <Title>{data().name}</Title>
        <Meta name="description" content={data().description} />
      </Show>
    <>
  )

peerreynders•5w ago

If you compare the basic to your app.tsx: note how you don't have a Suspense boundary. I wonder if the uncaught, thrown unsettled Promise from the createResource is creating problems.

ChristianOP•5w ago

Issue persists even with Suspense added. I had a suspense above my router originally but moved it into my Layout for the sake of getting it 1:1 and still happens. I also tried swapping to FileRoutes yesterday but issue was still persisting. I've spent like 8 hours on this now. It seems to start working on client side routing after a HMR reload, but it never works on initial SSR nor when navigating after SSRed. Only after I save a file when the page is already open. Title doesn't even operate correctly when swapping page with non fetched data. I just used a static title and it was still having the same issues except it at least ssred Here are my dependencies

  "dependencies": {
    "@solidjs/meta": "^0.29.4",
    "@solidjs/router": "^0.14.1",
    "@solidjs/start": "^1.0.5",
    "@unpic/solid": "^0.0.50",
    "socket.io-client": "^4.8.1",
    "solid-js": "^1.8.18",
    "vinxi": "^0.4.0"
  },

  "dependencies": {
    "@solidjs/meta": "^0.29.4",
    "@solidjs/router": "^0.14.1",
    "@solidjs/start": "^1.0.5",
    "@unpic/solid": "^0.0.50",
    "socket.io-client": "^4.8.1",
    "solid-js": "^1.8.18",
    "vinxi": "^0.4.0"
  },

Looking at SolidStarts internals they don't even invoke MetaProvider on the server despite this being recommended in the docs, is there a reason for this, or is it supposed to be either or?

peerreynders•5w ago

Your frustration is understandable. FYI: there is an outstanding PR that claims that removing a <Title /> (as it could happen on navigation) will add all remaining cascading titles onto the page: https://github.com/solidjs/solid-meta/pull/53 SolidStart provides a server side version of solid-js/web (including theuseAsset and ssr functions) that is used by Meta's server side provider to inject the tags into the server side render. So the MetaProvider in app.tsx operates for both SSR and CSR—even though the provider does behave differently.

GitHub

Fix removing one renders all previous <title>s by yume-chan · Pull...

removeTag missing a break causing all previous <title> tags to be rendered. Repro playground: https://playground.solidjs.com/anonymous/4fa1f8e7-fcb6-4f6c-a521-daf6207fc779 (looks like...

GitHub

solid-meta/src/index.tsx at b32fa71b9043fa8eefc3d23eca97c3da99e9ba3...

Write meta tags to the document head. Contribute to solidjs/solid-meta development by creating an account on GitHub.

peerreynders•5w ago

https://discord.com/channels/722131463138705510/1283876856860377103/1286754986142732298 I'm wondering whether maintenance is being delayed to later take advantage of Solid 2.0 capabilities.

ChristianOP•5w ago

I see- unfortunate as I wanted the benefits of solid start to have SSR for SEO but I’ll just omit it for now and upgrade in the future when there are updates. Do you know if there’s an estimated date yet? Hoping soon otherwise I wonder if it’d be worth for me to just migrate off till it’s more stable 🥲 Thanks for the explanation by the way! I must’ve missed it when looking but I always like learning more :) shame that there’s so many bugs unfortunately with the meta but oh well

peerreynders•5w ago

Do you know if there’s an estimated date yet?

It’ll be done when it’s done I your situation I'd be tempted to just copy index.ts into the project, apply the various fixes that you've come across that make sense to you and if that then works out for you, ride it out until post 2.0.

Adrian Chmielarz

The Astronauts

It'll be Done when It's Done

I was to give one, just one advice to an indie developer, it’d be: Never commit to a date. I’ve made the mistake of committing to a date many times. “Anyone can err, but only the fool...

GitHub

solid-meta/src/index.tsx at main · solidjs/solid-meta

Write meta tags to the document head. Contribute to solidjs/solid-meta development by creating an account on GitHub.

ChristianOP•4w ago

It’ll be done when it’s done

Very true Was already looking into just forking it but will have to be a future thing as I don't want to waste more time on it at the moment as I have some deadlines to meet unfortunately. I appreciate all the help you've given & advice.

Gaming

Programming

SolidStart Meta not updating

Did you find this page helpful?