kinsyu
kinsyu4w ago

createTRPCReact cannot be named without a reference to x

Hey, I have a monorepo where I have a separate package for trpc (@repo/api) which I'm trying to use on the frontend. When trying to create createTRPCReact I'm getting the following type error
The inferred type of 'trpcReact' cannot be named without a reference to '../../node_modules/@repo/api/dist/router/post'. This is likely not portable. A type annotation is necessary.
The inferred type of 'trpcReact' cannot be named without a reference to '../../node_modules/@repo/api/dist/router/post'. This is likely not portable. A type annotation is necessary.
Here's my code on the react app
import type { inferReactQueryProcedureOptions } from "@trpc/react-query";
import { createTRPCReact } from "@trpc/react-query";

import type { AppRouter } from "@repo/api";

export type ReactQueryOptions = inferReactQueryProcedureOptions<AppRouter>;

const trpcReact = createTRPCReact<AppRouter>();

export default trpcReact;
import type { inferReactQueryProcedureOptions } from "@trpc/react-query";
import { createTRPCReact } from "@trpc/react-query";

import type { AppRouter } from "@repo/api";

export type ReactQueryOptions = inferReactQueryProcedureOptions<AppRouter>;

const trpcReact = createTRPCReact<AppRouter>();

export default trpcReact;
And here's the code in the api package
import { createHTTPServer } from "@trpc/server/adapters/standalone";
import cors from "cors";

import { postRouter } from "./router/post";
import { createTRPCContext, createTRPCRouter } from "./trpc";

export const appRouter = createTRPCRouter({
post: postRouter,
});

// export type definition of API
export type AppRouter = typeof appRouter;

// create server
createHTTPServer({
middleware: cors(),
router: appRouter,
createContext: createTRPCContext,
}).listen(2022);
import { createHTTPServer } from "@trpc/server/adapters/standalone";
import cors from "cors";

import { postRouter } from "./router/post";
import { createTRPCContext, createTRPCRouter } from "./trpc";

export const appRouter = createTRPCRouter({
post: postRouter,
});

// export type definition of API
export type AppRouter = typeof appRouter;

// create server
createHTTPServer({
middleware: cors(),
router: appRouter,
createContext: createTRPCContext,
}).listen(2022);
5 Replies
kinsyu
kinsyu4w ago
GitHub
GitHub - kinsyudev/eq-poc
Contribute to kinsyudev/eq-poc development by creating an account on GitHub.
kinsyu
kinsyu4w ago
Bump
Ofir Smolinsky
yo bro @kinsyu did u manage to solve it? facing exact same issue here
kinsyu
kinsyu2w ago
nope Just decided to roll with it :shrug:
michaelschufi
michaelschufi2w ago
What's your tsconfig? Do you have something regarding declaration enabled? I think I had similar issues with declaration or declarationMap enabled...
More Posts
How do I use the rsc-rq-prefetch example with a protected procedure?Thank you for this implementation! It looks sooo promising 😀 However, I ran into an issue when trhow to handle or hydrate error throwed in prefetch with streaming?i tried next-app-dir / rsc-rq-prefetch example, but there have only success case, not failed. if i tProcedure passed as argument to function loses type safety.Hi there, I have a mystifying TS issue, where I lose type safety of my proc when I pass it as an argError "Subscriptions should use wsLink"I have made a stackoverflow post, hoping if I can get some help! https://stackoverflow.com/questionsWhy are `new QueryClient` and `trpc.createClient` run inside a component in the React setup?From <https://trpc.io/docs/client/react/setup>:```ts function App() { const [queryClient] = useStaHow are errors handled in batched requestsWe're using httpBatchLink, and have noticed that when multiple procedures calls are batched togetherFile upload with formdataI'm trying to upload a pdf file to R2 and save metadata to my postgres database (both through a trpcZod formatting ErrorI'm using Zod for validation and whenever I get a validation error I'd like to be able to get the erWhen a procedure returns an instance of a class, the superjson isApplicable doesnt detect itWhen a procedure returns an instance of a class, the superjson isApplicable doesnt detect it as thatValidating inputs and outputs only via typescriptHey everyone, I am trying to create an appRouter with `ts-morph` but I am having trouble with passin