S
SolidJS•6mo ago
Rvespula

Context with Meta

Hi there! 🙂 I have a problem. It seems that when I try to create a custom MetaTitle with SolidMeta, the language context is not being accessed in SSR. Here is my implementation: 
// Component
import { Title } from "@solidjs/meta";
import type { JSX } from "solid-js";

interface IMetaTitle {
  children: JSX.Element;
}
export function MetaTitle(props: IMetaTitle) {
  return <Title>{`${props.children} | WebsiteName`}</Title>;
}
// Component
import { Title } from "@solidjs/meta";
import type { JSX } from "solid-js";

interface IMetaTitle {
  children: JSX.Element;
}
export function MetaTitle(props: IMetaTitle) {
  return <Title>{`${props.children} | WebsiteName`}</Title>;
}
import { MetaProvider } from "@solidjs/meta";
import type { Component, JSX } from "solid-js";
import { Suspense } from "solid-js";
import { Toaster } from 'solid-toast';
import { LanguageTagProvider, useLocationLanguageTag } from "~/shared/i18n";
import { sourceLanguageTag } from "~/shared/paraglide/runtime";


interface IProviders {
  /** Content that will be wrapped by providers. */
  readonly children: JSX.Element;
}

export const Providers: Component<IProviders> = (props) => {
  const url_language_tag = useLocationLanguageTag();
  const language_tag = url_language_tag ?? sourceLanguageTag;

  return (
    <LanguageTagProvider value={language_tag}>
      <MetaProvider>
        <Suspense>{props.children}</Suspense>
        <Toaster />
      </MetaProvider>
    </LanguageTagProvider>
  );
};
import { MetaProvider } from "@solidjs/meta";
import type { Component, JSX } from "solid-js";
import { Suspense } from "solid-js";
import { Toaster } from 'solid-toast';
import { LanguageTagProvider, useLocationLanguageTag } from "~/shared/i18n";
import { sourceLanguageTag } from "~/shared/paraglide/runtime";


interface IProviders {
  /** Content that will be wrapped by providers. */
  readonly children: JSX.Element;
}

export const Providers: Component<IProviders> = (props) => {
  const url_language_tag = useLocationLanguageTag();
  const language_tag = url_language_tag ?? sourceLanguageTag;

  return (
    <LanguageTagProvider value={language_tag}>
      <MetaProvider>
        <Suspense>{props.children}</Suspense>
        <Toaster />
      </MetaProvider>
    </LanguageTagProvider>
  );
};
// route
import { MetaTitle } from "~/shared/components/metatitle";
import * as m from "~/shared/paraglide/messages.js";

export default function EmailValidationRoute() {
  return (
    <>
      <MetaTitle>{m.meta_route_email_validation()}</MetaTitle>
    </>
  );
}
// route
import { MetaTitle } from "~/shared/components/metatitle";
import * as m from "~/shared/paraglide/messages.js";

export default function EmailValidationRoute() {
  return (
    <>
      <MetaTitle>{m.meta_route_email_validation()}</MetaTitle>
    </>
  );
}
ERROR: 
 throw new Error("LanguageTagCtx not found");
              ^

Error: LanguageTagCtx not found
 throw new Error("LanguageTagCtx not found");
              ^

Error: LanguageTagCtx not found
this is the context for paraglide: https://github.com/thetarnav/paraglide-solidstart-hackernews/blob/main/src/i18n/adapter.ts
GitHub
paraglide-solidstart-hackernews/src/i18n/adapter.ts at main · theta...
Example hackernews app built with SolidStart and Paraglide-js for i18n. - thetarnav/paraglide-solidstart-hackernews
5 Replies
peerreynders
peerreynders•6mo ago
First thing I'd check is whether adapter.createI18n() is actually executed in your server side implementation. And given the source is in your project find out if/when the initialization goes off the rails.
GitHub
paraglide-solidstart-hackernews/src/i18n/index.tsx at b3b28ff610f61...
Example hackernews app built with SolidStart and Paraglide-js for i18n. - thetarnav/paraglide-solidstart-hackernews
peerreynders
peerreynders•6mo ago
One thing I'd note is that this import is probably the one responsible for loading the module on the server for the first time.
GitHub
paraglide-solidstart-hackernews/src/entry-server.tsx at b3b28ff610f...
Example hackernews app built with SolidStart and Paraglide-js for i18n. - thetarnav/paraglide-solidstart-hackernews
Rvespula
RvespulaOP•6mo ago
This is running on the server. If I remove the MetaTitle, it works. I'm not sure what could be wrong with the Title component from SolidMeta.
Rvespula
RvespulaOP•6mo ago
i found this issue in solid-meta: https://github.com/solidjs/solid-meta/issues/41
GitHub
[Bug?]: Cannot access context when read in Meta content prop. · Iss...
If you try to read context inside content prop of Meta component provided by start, the context will not be available, which is not expected as it's used directly under the provider. <Ctx.Pr...
peerreynders
peerreynders•6mo ago
Based on that issue, this crashes: 
import { createContext, useContext } from 'solid-js';
import { Title, Meta } from '@solidjs/meta';
import Counter from '~/components/Counter';

const Ctx = createContext<{ text: string }>();

export default function Home() {
  return (
    <Ctx.Provider value={{ text: 'you should see this' }}>
      <main>
        <Title>{useContext(Ctx)!.text}</Title>
        <h1>Hello world!</h1>
        <Counter />
        <p>
          Visit{' '}
          <a href="https://start.solidjs.com" target="_blank">
            start.solidjs.com
          </a>{' '}
          to learn how to build SolidStart apps.
        </p>
      </main>
    </Ctx.Provider>
  );
}
import { createContext, useContext } from 'solid-js';
import { Title, Meta } from '@solidjs/meta';
import Counter from '~/components/Counter';

const Ctx = createContext<{ text: string }>();

export default function Home() {
  return (
    <Ctx.Provider value={{ text: 'you should see this' }}>
      <main>
        <Title>{useContext(Ctx)!.text}</Title>
        <h1>Hello world!</h1>
        <Counter />
        <p>
          Visit{' '}
          <a href="https://start.solidjs.com" target="_blank">
            start.solidjs.com
          </a>{' '}
          to learn how to build SolidStart apps.
        </p>
      </main>
    </Ctx.Provider>
  );
}
But this works: 
import {
  createContext,
  createUniqueId,
  mergeProps,
  splitProps,
  useContext,
} from 'solid-js';
import { useHead } from '@solidjs/meta';
import Counter from '~/components/Counter';

const Ctx = createContext<{ text: string }>();

const MyTitle = (props: { [k: string]: any }) => {
  const text = useContext(Ctx)!.text;
  const [children, rest] = splitProps(props, ['children']);
  const merged = mergeProps({ children: `${children.children} ${text}` }, rest);

  useHead({
    tag: 'title',
    props: merged,
    setting: { escape: true, close: true },
    id: createUniqueId(),
    get name() {
      return props.name || props.property;
    },
  });

  return null;
};

export default function Home() {
  return (
    <Ctx.Provider value={{ text: 'you should see this' }}>
      <main>
        <MyTitle>Hello world</MyTitle>
        <h1>Hello world!</h1>
        <Counter />
        <p>
          Visit{' '}
          <a href="https://start.solidjs.com" target="_blank">
            start.solidjs.com
          </a>{' '}
          to learn how to build SolidStart apps.
        </p>
      </main>
    </Ctx.Provider>
  );
}
import {
  createContext,
  createUniqueId,
  mergeProps,
  splitProps,
  useContext,
} from 'solid-js';
import { useHead } from '@solidjs/meta';
import Counter from '~/components/Counter';

const Ctx = createContext<{ text: string }>();

const MyTitle = (props: { [k: string]: any }) => {
  const text = useContext(Ctx)!.text;
  const [children, rest] = splitProps(props, ['children']);
  const merged = mergeProps({ children: `${children.children} ${text}` }, rest);

  useHead({
    tag: 'title',
    props: merged,
    setting: { escape: true, close: true },
    id: createUniqueId(),
    get name() {
      return props.name || props.property;
    },
  });

  return null;
};

export default function Home() {
  return (
    <Ctx.Provider value={{ text: 'you should see this' }}>
      <main>
        <MyTitle>Hello world</MyTitle>
        <h1>Hello world!</h1>
        <Counter />
        <p>
          Visit{' '}
          <a href="https://start.solidjs.com" target="_blank">
            start.solidjs.com
          </a>{' '}
          to learn how to build SolidStart apps.
        </p>
      </main>
    </Ctx.Provider>
  );
}
Only you know how you plan to use your MetaTitle. Perhaps you can construct it in such a way that the context is accessed outside of useHead().
Want results from more Discord servers?
Add your server