SolidJSS
SolidJSโ€ข2y agoโ€ข
6 replies
ChrisThornham

<Title> Component Throwing Error. Can you help?

I built an SEO component that simplifies adding SEO to pages.

Unfortunately, I'm now getting the following error on every page:

"seo.tsx:20 computations created outside a createRoot or render will never be disposed"

The <Title> component is causing the error.

<Title>
  {props.seoData.title} - {brandName}
</Title>


Why?


Here's the full component for context:

import { SEOType } from "~/types/seo";
import { brandName, domain } from "../../../../quickstart.config";
import { Link, Meta, Title } from "@solidjs/meta";
import { Show } from "solid-js";

interface SEOProps {
  seoData: SEOType;
}

export default function SEO(props: SEOProps) {
  // VARIABLES ========================================================
  const fullUrl = props.seoData.urlSlug
    ? `${domain}/blog/${props.seoData.urlSlug}`
    : "";

  // TSX ==============================================================
  return (
    <>
      {/* General */}
      <Title>
        {props.seoData.title} - {brandName}
      </Title>
      <Show
        when={props.seoData.index}
        fallback={<Meta name="robots" content="noindex" />}
      >
        <Meta name="robots" content="index" />
      </Show>
      <Show
        when={props.seoData.follow}
        fallback={<Meta name="robots" content="nofollow" />}
      >
        <Meta name="robots" content="follow" />
      </Show>
      <Meta name="description" content={props.seoData.description} />

      <Meta property="og:description" content={props.seoData.description} />
      <Meta
        property="og:title"
        content={`${props.seoData.title} - ${brandName}`}
      />
      <Meta property="og:type" content="website" />
      <Show when={props.seoData.urlSlug}>
        <Meta property="og:url" content={fullUrl} />
      </Show>
      <Meta property="og:site_name" content={brandName} />

      <Show when={props.seoData.urlSlug}>
        <Link rel="canonical" href={fullUrl} />
      </Show>
    </>
  );
}
Was this page helpful?