<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
The
Why?
Here's the full component for context:
Unfortunately, I'm now getting the following error on every page:
"seo.tsx:20 computations created outside a
createRootcreateRoot or renderrender will never be disposed"The
<Title><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>
</>
);
}