SolidJS•6mo ago

<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>

<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>
    </>
  );
}

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>
    </>
  );
}

5 Replies

REEEEE•6mo ago

what's on line 20

ChrisThornhamOP•6mo ago

@REEEEE This:

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

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

REEEEE•6mo ago

could be because of brandName where is that from? Is it just a constant?

ChrisThornhamOP•6mo ago

Yes, it is a constant. I solved it. The `<Title> component didn't like the fact that there were two variables in separate curly braces. This fixed it:

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

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

brenelz•6mo ago

That's kinda odd

Gaming

Programming

<Title> Component Throwing Error. Can you help?