SolidJS•2mo ago

useParams() returns params with unknown values

I'm trying to ssr a page with a dynamic parameter, but the parameters I get on the server are unknown. They are available in the preload function. Worst part is that I think this used to work a few days ago, and now it doesn't and it seems I've broken it somehow.

interface RouteProps {
  id: string
}

export const route = {
  preload: ({ params }) => getSong(params.id),
} satisfies RouteDefinition


export default function Song() {
  const params = useParams();

  console.log('params:' + JSON.stringify(params))
  const data = createAsync(() => getSong(params.id));
  ...

interface RouteProps {
  id: string
}

export const route = {
  preload: ({ params }) => getSong(params.id),
} satisfies RouteDefinition


export default function Song() {
  const params = useParams();

  console.log('params:' + JSON.stringify(params))
  const data = createAsync(() => getSong(params.id));
  ...

export const getSong = cache(async (id: string) => {
  'use server'
  const response = await api.get<GetSongResponse>(`/songs/${id}`)
  return response;
}, 'song');

export const getSong = cache(async (id: string) => {
  'use server'
  const response = await api.get<GetSongResponse>(`/songs/${id}`)
  return response;
}, 'song');

2 Replies

Madaxen86•2mo ago

It does look fine. Are the imports okay? Maybe delete and reinstall node_modules

AjsoOP•2mo ago

I just realized it might be a docker issue, because I run my dev frontend, backend and db in docker-compose. Params are defined when I run the frontend standalone without docker. You can still take a look at it, but it isn't a solid related issue I believe.

docker-compose.yaml
services:
  frontend-dev:
    container_name: band-app-frontend-dev
    build:
      context: frontend
      dockerfile: docker/dev/Dockerfile
    volumes:
      - ./frontend:/app:cached
    ports:
      - "3000:3000"
      - "4000:4000"
    env_file:
      - frontend/.env.local
    restart: always
...

docker-compose.yaml
services:
  frontend-dev:
    container_name: band-app-frontend-dev
    build:
      context: frontend
      dockerfile: docker/dev/Dockerfile
    volumes:
      - ./frontend:/app:cached
    ports:
      - "3000:3000"
      - "4000:4000"
    env_file:
      - frontend/.env.local
    restart: always
...

FROM oven/bun:latest
WORKDIR /app
COPY package.json bun.lockb ./
RUN bun install
COPY . .
EXPOSE 3000
CMD ["bun", "dev", "--host"]

FROM oven/bun:latest
WORKDIR /app
COPY package.json bun.lockb ./
RUN bun install
COPY . .
EXPOSE 3000
CMD ["bun", "dev", "--host"]

Gaming

Programming

useParams() returns params with unknown values