Skip to content

Solid-start example throws error, documentation needs updating #51

@smtrd3

Description

@smtrd3

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions