z.discriminatedUnion nested in procedure output makes trpc-panel render as blank page without any warnings/errors

[DJanocha]

trafficstars

First of all: library is awesome and helps a lot during development. Thank you for you work!

Unfortunately I cannot show a code snippet due to security reasons but more or less the problem looks like described below.

const unionASchema = z.object({
  type: z.literal("a"),
  other: z.string(),
  other2: z.number(),
})
const unionBSchema = z.object({
  type: z.literal("b"),
  other3: z.string(),
})

export const unionSchema = z.discriminatedUnion("type", [unionASchema, unionBSchema])
const userSchema = z.object({
  name: z.string(),
  age: z.number(),
  custom: unionSchema,
})

And then in some procedure, 'output' is declared using userSchema schema.

This resulted in blank page when navigated to '/api/trpc-panel' which rendered this:

import { type Request, type Response } from "express";
import { renderTrpcPanel } from "trpc-panel";

import { appRouter } from "../routers/index";

export const trpcPanelMiddleware = (req: Request, res: Response) => {
  return res.send(
    renderTrpcPanel(appRouter, {
      url: "/api/trpc",
      transformer: "superjson",
    }),
  );
};

I found out that when I change z.discriminatedUnion to z.union, everything starts to work again. But AFAIK, type narrowing works worse in z.union compared to z.discriminatedUnion.

I understand that that could be hard to fix/address, but I just wanted to leave that for others that could found themselves in similar problem.