saj•3w ago

lazy loading does not work, but direct import works

minimal example: not working:

export const appRouter = router({
  jobs: router({
    core: lazy(() => import("./routes/jobs/core/router").then((m) => m.jobCoreRouter)),
})

export const appRouter = router({
  jobs: router({
    core: lazy(() => import("./routes/jobs/core/router").then((m) => m.jobCoreRouter)),
})

however, replacing lazy with core: jobCoreRouter, and a direct import works... working:

import { jobCoreRouter } from "./routes/jobs/core/router";

export const appRouter = router({
  jobs: router({
    core: jobCoreRouter,
})

import { jobCoreRouter } from "./routes/jobs/core/router";

export const appRouter = router({
  jobs: router({
    core: jobCoreRouter,
})

[{"error":{"json":{"message":"No procedure found on path \"jobs.core.queries.getJobDetails\"","code":-32004,"data":{"code":"NOT_FOUND","httpStatus":404,"stack":"TRPCError: No procedure found on path \"jobs.core.queries.getJobDetails\"\n    at eval (webpack-internal:///(rsc)/../../node_modules/.pnpm/@trpc+server@11.1.2_typescript@5.8.2/node_modules/@trpc/server/dist/unstable-core-do-not-import/http/resolveResponse.mjs:243:27)\n    at Array.map (<anonymous>)\n    at resolveResponse (webpack-internal:///(rsc)/../../node_modules/.pnpm/@trpc+server@11.1.2_typescript@5.8.2/node_modules/@trpc/server/dist/unstable-core-do-not-import/http/resolveResponse.mjs:236:37)\n    at async fetchRequestHandler (webpack-internal:///(rsc)/../../node_modules/.pnpm/@trpc+server@11.1.2_typescript@5.8.2/node_modules/@trpc/server/dist/adapters/fetch/fetchRequestHandler.mjs:41:12)\n    at async AppRouteRouteModule.do

[{"error":{"json":{"message":"No procedure found on path \"jobs.core.queries.getJobDetails\"","code":-32004,"data":{"code":"NOT_FOUND","httpStatus":404,"stack":"TRPCError: No procedure found on path \"jobs.core.queries.getJobDetails\"\n    at eval (webpack-internal:///(rsc)/../../node_modules/.pnpm/@trpc+server@11.1.2_typescript@5.8.2/node_modules/@trpc/server/dist/unstable-core-do-not-import/http/resolveResponse.mjs:243:27)\n    at Array.map (<anonymous>)\n    at resolveResponse (webpack-internal:///(rsc)/../../node_modules/.pnpm/@trpc+server@11.1.2_typescript@5.8.2/node_modules/@trpc/server/dist/unstable-core-do-not-import/http/resolveResponse.mjs:236:37)\n    at async fetchRequestHandler (webpack-internal:///(rsc)/../../node_modules/.pnpm/@trpc+server@11.1.2_typescript@5.8.2/node_modules/@trpc/server/dist/adapters/fetch/fetchRequestHandler.mjs:41:12)\n    at async AppRouteRouteModule.do

this is how the jobCoreRouter looks:

import { router } from "../../../server";
import { jobQueries } from "./queries";
import { jobMutations } from "./mutations";

export const jobCoreRouter = router({
  queries: jobQueries,
  mutations: jobMutations,
});

import { router } from "../../../server";
import { jobQueries } from "./queries";
import { jobMutations } from "./mutations";

export const jobCoreRouter = router({
  queries: jobQueries,
  mutations: jobMutations,
});

5 Replies

sajOP•3w ago

here is my tsconfig for extra measure, in case it's to do with the lazy import (doesn't reference .ts or .js)

  "compilerOptions": {
    "outDir": "./dist",
    "moduleResolution": "bundler",
    "module": "Preserve",
    "incremental": true,
    "declaration": true,
    "declarationMap": true,
    "jsx": "react-jsx",
    "noEmit": true,
    "allowImportingTsExtensions": true,
    "baseUrl": ".",

  "compilerOptions": {
    "outDir": "./dist",
    "moduleResolution": "bundler",
    "module": "Preserve",
    "incremental": true,
    "declaration": true,
    "declarationMap": true,
    "jsx": "react-jsx",
    "noEmit": true,
    "allowImportingTsExtensions": true,
    "baseUrl": ".",

also i'm on 11.1.2 (matching for all trpc packages)

Alex / KATT 🐱•3w ago

how are you calling it? might be a bug in our react adapter, i see your code mentions RSC here's a working reference https://github.com/trpc/trpc/tree/main/examples/lazy-load if you can, make a reproduction and post an issue on github using one of our example projects

sajOP•3w ago

@Alex / KATT 🐱

import { trpc } from "@repo/server/src/client";

  const { data: job, isLoading, error } = trpc.jobs.core.queries.getJobDetails.useQuery({ id: params.id });

import { trpc } from "@repo/server/src/client";

  const { data: job, isLoading, error } = trpc.jobs.core.queries.getJobDetails.useQuery({ id: params.id });

http://localhost:3000/api/trpc/jobs.core.queries.getJobDetails the fact that direct import works and lazy doesn't, i assume it might be related to the adapter.

Alex / KATT 🐱•3w ago

how are you setting up the client?

sajOP•3w ago

client.ts:

import { createTRPCReact, type CreateTRPCReact } from "@trpc/react-query";
import type { AppRouter } from "./router";

/**
 * This is the client-side definition of the tRPC API. It is used to generate
 * the typings.
 */

export const trpc: CreateTRPCReact<AppRouter, unknown> = createTRPCReact<AppRouter>();

import { createTRPCReact, type CreateTRPCReact } from "@trpc/react-query";
import type { AppRouter } from "./router";

/**
 * This is the client-side definition of the tRPC API. It is used to generate
 * the typings.
 */

export const trpc: CreateTRPCReact<AppRouter, unknown> = createTRPCReact<AppRouter>();

also a typical provider.tsx with queryClient + superjson. like mentioned, it's working until i use lazy and point to the same import 😄

lazy loading does not work, but direct import works

Did you find this page helpful?