solidjs/solid-start

server code is being imported on the client

OrJDev opened this issue · 2 comments

OrJDev commented
import { validateZod } from "@prpc/solid";
import { callMiddleware$ } from "@prpc/solid";
import server$ from "solid-start/server";
import { query$ } from "@prpc/solid";
import { z } from "zod";
import { protectedProcedure } from "./middleware";
export const helloQuery = query$(server$(async ({
  payload: _$$payload
}) => {
  const _$$validatedZod = await validateZod(_$$payload, z.object({
    name: z.string()
  }));
  if (_$$validatedZod instanceof Response) return _$$validatedZod;
  _$$payload = _$$validatedZod;
  return `server says hello: ${_$$payload.name}`;
}), "hello");
export const protectedQuery = protectedProcedure.query$(server$(async ({
  payload: _$$payload
}) => {
  const ctx$ = await protectedProcedure.callMw(server$.request);
  if (ctx$ instanceof Response) return ctx$;
  return `protected - ${ctx$.session.user.name}`;
}), "protected-1");

Screenshot 2023-04-21 at 14 05 11

authOptions is using some sort of env validation, but authOptions is only accessed on the server side, for some reason solidstart is trying to import authOptions on the client causing this issue to be thrown,

full code:

middleware.ts

import { middleware$, error$, reuseable$ } from "@prpc/solid";
import { getSession } from "@solid-auth/base";
import { authOptions } from "../auth";

export const authMw = middleware$(async ({ request$ }) => {
  console.log(`authMw called on ${typeof window}`);
  const session = await getSession(request$, authOptions);
  if (!session || !session.user) {
    return error$("You can't do that!");
  }
  return {
    session: {
      ...session,
      user: session.user,
    },
  };
});

export const protectedProcedure = reuseable$(authMw);

queries.ts

import { query$ } from "@prpc/solid";
import { z } from "zod";
import { protectedProcedure } from "./middleware";

export const helloQuery = query$({
  queryFn: ({ payload }) => {
    return `server says hello: ${payload.name}`;
  },
  key: "hello",
  schema: z.object({ name: z.string() }),
});

export const protectedQuery = protectedProcedure.query$({
  queryFn: ({ ctx$ }) => {
    return `protected - ${ctx$.session.user.name}`;
  },
  key: "protected-1",
});

auth.ts

import { type SolidAuthConfig } from "@solid-auth/base";
import Discord from "@auth/core/providers/discord";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { serverEnv } from "~/env/server";
import { prisma } from "./db";

declare module "@auth/core/types" {
  export interface Session {
    user?: {
      id?: string;
    } & DefaultSession["user"];
  }
}

export const authOptions: SolidAuthConfig = {
  callbacks: {
    session({ session, user }) {
      if (session.user) {
        session.user.id = user.id;
      }
      return session;
    },
  },
  // @ts-expect-error - this is a valid adapter
  adapter: PrismaAdapter(prisma),
  providers: [
    Discord({
      clientId: serverEnv.DISCORD_ID,
      clientSecret: serverEnv.DISCORD_SECRET,
    }),
  ],
  debug: false,
};
OrJDev commented

Ik that vite doesn't treeshake in dev but obv this has to be solved because i can't test my app at all having this error thrown