kinsyu•3mo 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•3mo ago

Repo to reproduce https://github.com/kinsyudev/eq-poc

GitHub

GitHub - kinsyudev/eq-poc

Contribute to kinsyudev/eq-poc development by creating an account on GitHub.

kinsyu•3mo ago

Bump

Ofir Smolinsky•3mo ago

yo bro @kinsyu did u manage to solve it? facing exact same issue here

kinsyu•3mo ago

nope Just decided to roll with it :shrug:

Michael Schaufelberger•3mo ago

What's your tsconfig? Do you have something regarding declaration enabled? I think I had similar issues with declaration or declarationMap enabled...