TypeError: Cannot read properties of undefined (reading 'query')

[YKDZ]

Hi everyone, I am using Vike + tRPC + Hono.js to build an SSR application, but I have encountered some problems.
When I tried to split the tRPC router to different file and merge it, I have got an error like:

TypeError: Cannot read properties of undefined (reading 'query')
    at eval (eval at instantiateModule (file:///D:/Web%20App%20Project/yggdrasil/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-CUvs3bbV.js:52905:24), <anonymous>:6:47)
    at instantiateModule (file:///D:/Web%20App%20Project/yggdrasil/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-CUvs3bbV.js:52914:5)
┌─────────────────────────────────────────────────────────────────────────────┐
│ The error could be a CJS/ESM issue, see https://vike.dev/broken-npm-package │
└─────────────────────────────────────────────────────────────────────────────┘

Here is the relevant code:
./trpc/server.ts:

import { initTRPC } from "@trpc/server"
import { Context } from "./context"
import { z } from "zod"
import { authRouter } from "./router/auth"

/**
 * Initialization of tRPC backend
 * Should be done only once per backend!
 */
const t = initTRPC.context<Context>().create()

/**
 * Export reusable router and procedure helpers
 * that can be used throughout the router
 */
export const router = t.router
export const publicProcedure = t.procedure

export const appRouter = router({
  demo: publicProcedure.query(async () => {
    return { demo: true }
  }),
  createTodo: publicProcedure
    .input(z.string())
    .mutation(async (opts) => {
      console.log("Received new todo from " + opts.ctx.user?.name, { text: opts.input })
    }),
  auth: authRouter // Adding this line will cause error
})

export type AppRouter = typeof appRouter

./trpc/router/auth.ts:

import { router, publicProcedure } from '../server'

export const authRouter = router({
  list: publicProcedure.query(() => {
    return []
  }),
})

trpc-handler.ts

import { fetchRequestHandler } from "@trpc/server/adapters/fetch"
import { Hono } from "hono"
import { appRouter } from "./trpc/server"
import { createContext } from "./trpc/context"

const app = new Hono()

app.all('*', (c) => {
    return fetchRequestHandler({
        endpoint: '/api/trpc',
        req: c.req.raw,
        router: appRouter,
        createContext
    })
})

export const trpcRouter = app

Here are the individual dependencies I use:

    "@hono/node-server": "^1.12.2",
    "@trpc/client": "11.0.0-rc.502",
    "@trpc/server": "11.0.0-rc.502",
    "@universal-middleware/hono": "^0.2.5",
    "@vitejs/plugin-vue": "^5.1.3",
    "@vue/compiler-sfc": "^3.5.3",
    "@vue/server-renderer": "^3.5.3",
    "@vueuse/core": "^11.0.3",
    "bcryptjs": "^2.4.3",
    "hono": "^4.5.11",
    "tsx": "^4.19.0",
    "vike": "^0.4.195",
    "vike-vue": "^0.8.3",
    "vite": "^5.4.6",
    "vue": "^3.5.3",

I've done some searching and trying but I don't really know how to fix this, has anyone had a similar problem please?

Edit:

This error will still appear after run pnpm up --lastest to update my denpendencies:

TypeError: Cannot read properties of undefined (reading 'use')
    at eval (eval at instantiateModule (file:///D:/Web%20App%20Project/yggdrasil/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:52906:24), <anonymous>:24:53)
    at instantiateModule (file:///D:/Web%20App%20Project/yggdrasil/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:52915:5)

[YKDZ]

I'm not sure why, but putting the appRouter in a separate _app.ts file eventually solved the problem.
https://trpc.io/docs/server/merging-routers#merging-with-child-routers