solid-meta icon indicating copy to clipboard operation
solid-meta copied to clipboard

Solid-start example throws error, documentation needs updating

Open smtrd3 opened this issue 1 year ago • 2 comments

The example shown in readme (solid-start section) does not work out of the box. It shows error tags array should be passed to <MetaProvider /> in node, however there is no suitable example mentioned in the docs about what the tags array expects.

// @refresh reload
import { MetaProvider, Title } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start";
import { Suspense } from "solid-js";
import "./app.css";

export default function App() {
  return (
    <Router
      root={props => (
        <MetaProvider>
          <Title>SolidStart - Basic</Title>
          <a href="/">Index</a>
          <a href="/about">About</a>
          <Suspense>{props.children}</Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

I tried the following code

import './app.css';
import { Router } from '@solidjs/router';
import { FileRoutes } from '@solidjs/start/router';
import { Suspense } from 'solid-js';
import Nav from '~/components/Nav';
import { MetaProvider, Title } from '@solidjs/meta';

export default function App() {
  return (
    <Router
      root={(props) => (
        <MetaProvider tags={[{ id: 'hello', tag: 'title', props: { children: 'my page' } }]}>
          <Nav />
          <Suspense>{props.children}</Suspense>
          <Title>my page</Title>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

In doing so the error is gone but it does not render anything on the SSR output. The tag prop is not properly typed so I am not sure if I am passing the correct value. I think some more details are missing in the documentation.

Also what does On the server, the tags are collected, and then on the client the server-generated tags are removed in favor of the client-rendered tags so that SPAs still work as expected (e.g. in cases where subsequent page loads need to change the head tags). this mean? I assume it must render something in the SSR output initially and then modifies those on the client?

smtrd3 avatar Jul 06 '24 07:07 smtrd3

Having a similar issue @smtrd3. Did you ever sort this out?

droplab avatar Nov 08 '24 21:11 droplab

For me isn't working at all. Anyone have an example how to do it in solid start please?

tutods avatar Dec 18 '24 11:12 tutods