Christian Posts - Answer Overflow

Christian

•Created by Christian on 1/7/2025 in #support

SolidStart Meta not updating

Per the docs, I tried to add meta tags to my website, I added the base <MetaProvider> and the fallback tags inside my <Router layout={}/> as seen below

      <MetaProvider>
        <Title>test</Title>
        <Meta name="description" content="test" />

        <Link rel="icon" href="/favicon.ico" />

        {navbarEnabled() && (
          <Navbar user={user()!} />
        )}

        <div class={styles.contentWrapper}>
          {props.children}
        </div>

        <Footer />
      </MetaProvider>

      <MetaProvider>
        <Title>test</Title>
        <Meta name="description" content="test" />

        <Link rel="icon" href="/favicon.ico" />

        {navbarEnabled() && (
          <Navbar user={user()!} />
        )}

        <div class={styles.contentWrapper}>
          {props.children}
        </div>

        <Footer />
      </MetaProvider>

From there, according to the docs or at least my understanding I should now be able to use <Meta> in a specific route and overwrite these, and so I did

  return (
    <>
      <Show when={data()}>
        <Title>{data().name}</Title>
        <Meta name="description" content={data().description} />
      </Show>

  return (
    <>
      <Show when={data()}>
        <Title>{data().name}</Title>
        <Meta name="description" content={data().description} />
      </Show>

Despite this, the tags seem to be creating multiple times, and not deleting the old ones. So in my document I have both the fallback tags and the page specific tags an whichever one displays seems to be random. Unsure where I messed up so any help would be greatly appreciated.

16 replies

SSolidJS

•Created by Christian on 12/1/2024 in #support

Redirect in createResource

Hey, I don't quite understand where to use redirect, thought it was meant to run server-side but doesnt appear to work inside a deferred createResource. What do I need to do to make this work?

import { redirect } from '@solidjs/router';
import { createResource } from 'solid-js';

export function handleRedirect() {
  'use server';

  throw redirect('/404');
}

export default function CatchAll() {
  createResource(handleRedirect, { deferStream: true });

  return (<></>);
}

import { redirect } from '@solidjs/router';
import { createResource } from 'solid-js';

export function handleRedirect() {
  'use server';

  throw redirect('/404');
}

export default function CatchAll() {
  createResource(handleRedirect, { deferStream: true });

  return (<></>);
}

22 replies

SSolidJS

•Created by Christian on 7/26/2024 in #support

Solid-Start vinxi/http issue with useWebRequest

Hey, when using getWebRequest from vinxi/http inside a Context I get the error,

Error: Module "node:async_hooks" has been externalized for browser compatibility. Cannot access "node:async_hooks.AsyncLocalStorage" in client code.

Error: Module "node:async_hooks" has been externalized for browser compatibility. Cannot access "node:async_hooks.AsyncLocalStorage" in client code.

Here's the exact code that errors, I know it's getWebRequest as the error goes away after this.

import { createContext, createResource, createSignal, useContext } from 'solid-js';
import { isServer } from 'solid-js/web';
import { getUser } from '../utils/userUtils';
import { getWebRequest } from 'vinxi/http';

type UserDataType = [
  user: any,
]

const UserContext = createContext<UserDataType>();

export function UserProvider(props: any) {
  const [ user ] = createResource(fetchUser); const userData: UserDataType = [ user ];

  'use server';
  async function fetchUser() {
    if (!isServer) return;

    const request = getWebRequest();
    
    try {
      return await getUser(request);
    } catch (e) {
      console.log(e);

      return null;
    }
  }

  return (
    <UserContext.Provider value={userData}>
      {props.children}
    </UserContext.Provider>
  );
}

export function useUser() {
  return useContext(UserContext)!;
}

import { createContext, createResource, createSignal, useContext } from 'solid-js';
import { isServer } from 'solid-js/web';
import { getUser } from '../utils/userUtils';
import { getWebRequest } from 'vinxi/http';

type UserDataType = [
  user: any,
]

const UserContext = createContext<UserDataType>();

export function UserProvider(props: any) {
  const [ user ] = createResource(fetchUser); const userData: UserDataType = [ user ];

  'use server';
  async function fetchUser() {
    if (!isServer) return;

    const request = getWebRequest();
    
    try {
      return await getUser(request);
    } catch (e) {
      console.log(e);

      return null;
    }
  }

  return (
    <UserContext.Provider value={userData}>
      {props.children}
    </UserContext.Provider>
  );
}

export function useUser() {
  return useContext(UserContext)!;
}

14 replies

SSolidJS

•Created by Christian on 12/30/2023 in #support

Route Intercepting

Good Evening, I was trying to create protected routes within my app on the server side via entry-server, and it was working until I noticed that when I added ({ forward )} within the createHandler as seen below, it stopped running that function on every route and only did it on initial page load.

export default createHandler(
  ({ forward }) => {
    return async event => {
      console.log('a')
      return forward(event)
    }
  },
  renderStream((event) => <StartServer event={event} />)
);

export default createHandler(
  ({ forward }) => {
    return async event => {
      console.log('a')
      return forward(event)
    }
  },
  renderStream((event) => <StartServer event={event} />)
);

So then I went to the docs, looked at middleware and noticed they used @solidjs/start/server for their defineConfig, of which I tried to do so I can define my own middleware and hopefully correctly intercept routes that way but then got this error

10:31:27 AM [vite] vite.config.js changed, restarting server...
failed to load config from C:\...\vite.config.js
10:31:27 AM [vite] The requested module 'file:///C:/.../node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]/node_modules/@solidjs/start/config/index.js' does not provide an export named 'default'

10:31:27 AM [vite] vite.config.js changed, restarting server...
failed to load config from C:\...\vite.config.js
10:31:27 AM [vite] The requested module 'file:///C:/.../node_modules/.pnpm/@[email protected][email protected][email protected][email protected][email protected]/node_modules/@solidjs/start/config/index.js' does not provide an export named 'default'

So I'm left a little lost on how to intercept each route change server side without handling it client side. Cause client side I'm sure I can setup a createEffect and then run my auth protection, but just wanted to get it before it even renders anything. Thanks for any help.

10 replies

SSolidJS

•Created by Christian on 11/21/2023 in #support

Using Show with createRouteData / useRouteDat

Currently have a project setup with SolidStart, renderStream, and using createRouteData and useRouteData, my issue comes in when I want to use <Show>, I was using this on my original project which was using createResource but since I'm porting to SolidStart I figured I'd use their APIs, and now I'm getting a Hydration issue if I try to use <Show> but works fine if I just use <Suspense>

6 replies

SSolidJS

•Created by Christian on 8/15/2023 in #support

Prevent route from rerendering

Is it possible to prevent a rerender going from /page1/subpage to /page1 or vice versa? I am dealing with the routing like so, but seems to trigger a rerender regardless.

<Route path='/myRoute' element={
  <Suspense fallback={<Loader/>}>
    <MyRoute/>
  </Suspense>
}>
  <Route path='/test' element={null}/>
</Route>

<Route path='/myRoute' element={
  <Suspense fallback={<Loader/>}>
    <MyRoute/>
  </Suspense>
}>
  <Route path='/test' element={null}/>
</Route>

1 replies

Gaming

Programming