Should a <ReturnType typeof fn> type declaration of a function used in getServerSideProps cause the function to be bundled client-side?

[lkbr]

Hi friends,

See here: https://next-code-elimination.now.sh/s/nP8kScwwq

I'm unsure if this is a bug or expected behaviour because I'm not familiar with the intricacies of bundling types + next's client side code elimination.

The reason this came up is because I'm using Prisma in getServerSideProps but relying on their fancy type definition that gives dynamic types based on what fields we query for. See: https://www.prisma.io/docs/reference/tools-and-interfaces/prisma-client/advanced-usage-of-generated-types#solution-1.

Defining PromiseReturnType<typeof fn> is causing fn which includes Prisma to be bundled client side in development which causes a Module not found: Can't resolve 'child_process' in... error because the Prisma client uses node packages.

Prisma code: https://next-code-elimination.now.sh/s/3byxqXdyx

import { PrismaClient, PromiseReturnType } from "@prisma/client"
import { GetServerSideProps } from "next"
import React from "react"

const prisma = new PrismaClient()

async function getOrg(slug: string | string[] | undefined) {
  if (!slug || (slug && typeof slug !== "string")) {
    return null
  }

  return await prisma.organisation.findOne({
    where: {
      slug,
    },
  })
}

type Organisation = PromiseReturnType<typeof getOrg>

type PageProps = {
  organisation: Organisation
}

export default function Page(props: PageProps) {
  return <div>{props.organisation.name}</div>
}

export const getServerSideProps: GetServerSideProps<PageProps> = async ({
  query: { slug },
}) => {
  const organisation = await getOrg(slug)

  return {
    props: {
      organisation,
    },
  }
}

If it's not a bug, is there a better way of handling this?

Thanks 🙏

[lkbr]

Hi @leerob, sorry to include you out the blue, but I noticed you're doing the prisma and next workshop for Prisma day. Any ideas on the above?

Not being able to use PromiseReturnType to narrow down types would be a huge loss for us.

[timneutkens]

You can check if it's tree shaken here: https://next-code-elimination.now.sh/, looks like your code is not tree shaken currently because it imports a type from the prisma module 🤔

However looking at the code you probably want to use https://nextjs.org/docs/basic-features/data-fetching#typescript-use-getserversideprops InferGetServerSidePropsType which is nicer anyway as it automatically infers the types from the prisma fetching you're doing

import { PrismaClient } from "@prisma/client"
import { GetServerSideProps, InferGetServerSidePropsType } from "next"
import React from "react"

const prisma = new PrismaClient()

async function getOrg(slug: string | string[] | undefined) {
  if (!slug || (slug && typeof slug !== "string")) {
    return null
  }

  return await prisma.organisation.findOne({
    where: {
      slug,
    },
  })
}

export default function Page(props: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return <div>{props.organisation.name}</div>
}

export const getServerSideProps: GetServerSideProps<PageProps> = async ({
  query: { slug },
}) => {
  const organisation = await getOrg(slug)

  return {
    props: {
      organisation,
    },
  }
}

[lkbr]

Thank you for responding. I was unaware of InferGetServerSidePropsType. Next + Vercel + useSWR has made web development 👌 thanks to you and your teams continued efforts.

Below is the code that worked for me for anyone else facing a similar issue. You will notice I ended up using both InferGetServerSidePropsType and Prisma's PromiseReturnType. See #11842 (comment) for why. You will also note in https://next-code-elimination.now.sh/s/KpaCh-ItD that prisma is now not bundled client side. Some of this might not be relevant if #12756 is resolved.

import { PrismaClient, PromiseReturnType } from "@prisma/client"
import { GetServerSideProps, InferGetServerSidePropsType } from "next"

const prisma = new PrismaClient()

async function getOrg(slug: string | string[] | undefined) {
  if (!slug || (slug && typeof slug !== "string")) {
    return null
  }

  const organisation = await prisma.organisation.findOne({
    where: {
      slug,
    },
    select: {
      name: true,
    },
  })

  return organisation
}

export const getServerSideProps: GetServerSideProps<{
  organisation: PromiseReturnType<typeof getOrg>
}> = async ({ query: { slug } }) => {
  const organisation = await getOrg(slug)

  return {
    props: {
      organisation,
    },
  }
}

export default function Page(
  props: InferGetServerSidePropsType<typeof getServerSideProps>,
) {
  return <div>{props.organisation?.name}</div>
}

[Timer]

Duplicate of #12756, but I've opened an issue with OPs reproduction!

[lkbr]

Apologies, I missed the original issue.