Christian Posts - Answer Overflow

Christian

•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