Ofir Smolinsky
Ofir Smolinsky
PostsComments
TtRPC
Created by Ofir Smolinsky on 7/2/2024 in #❓-help
tRPC typings not working - Cannot import @trpc/server on client
hi guys, my structure is the following: - Turborepo TS compiling to cjs - A common packcage which defines the tRPC router - A server service which imports it & runs on expressjs - A NextJS client which imports the type and supposed to interact with the server however, i cannot import the type on the client due to the follwowing error: 
@01/app:build: ../../packages/api/src/routers/index.ts:4:14
@01/app:build: Type error: The inferred type of 'appRouter' cannot be named without a reference to '../../../../node_modules/@trpc/server/dist/core/router'. This is likely not portable. A type annotation is necessary.
@01/app:build: 
@01/app:build:   2 | import { userRouter } from './user.router';
@01/app:build:   3 |
@01/app:build: > 4 | export const appRouter = router({ user: userRouter });
@01/app:build:     |              ^
@01/app:build:   5 | export type AppRouter = typeof appRouter
@01/app:build: ../../packages/api/src/routers/index.ts:4:14
@01/app:build: Type error: The inferred type of 'appRouter' cannot be named without a reference to '../../../../node_modules/@trpc/server/dist/core/router'. This is likely not portable. A type annotation is necessary.
@01/app:build: 
@01/app:build:   2 | import { userRouter } from './user.router';
@01/app:build:   3 |
@01/app:build: > 4 | export const appRouter = router({ user: userRouter });
@01/app:build:     |              ^
@01/app:build:   5 | export type AppRouter = typeof appRouter
my code is the following Common package: 
import { router } from '../trpc';
import { userRouter } from './user.router';

export const appRouter = router({ user: userRouter });
export type AppRouter = typeof appRouter
import { router } from '../trpc';
import { userRouter } from './user.router';

export const appRouter = router({ user: userRouter });
export type AppRouter = typeof appRouter
Client: 
'use client';

import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '@01/api';
import { transformer } from '@01/api';
import { assertDefinedValue } from '@01/common';

const client = createTRPCProxyClient<AppRouter>({
  transformer,
  links: [
    httpBatchLink({
      url: assertDefinedValue(
        process.env.API_SERVER_URL,
        'API_SERVER_URL ENV Is Undefined On App!',
      ),
    }),
  ],
});
export default function Docs() {
}
'use client';

import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '@01/api';
import { transformer } from '@01/api';
import { assertDefinedValue } from '@01/common';

const client = createTRPCProxyClient<AppRouter>({
  transformer,
  links: [
    httpBatchLink({
      url: assertDefinedValue(
        process.env.API_SERVER_URL,
        'API_SERVER_URL ENV Is Undefined On App!',
      ),
    }),
  ],
});
export default function Docs() {
}
Server: 
import { appRouter, createContext } from '@01/api';
const app = express();
app.use(
  '/',
  trpcExpress.createExpressMiddleware({
    router: appRouter,
    createContext: createContext,
  }),
);
import { appRouter, createContext } from '@01/api';
const app = express();
app.use(
  '/',
  trpcExpress.createExpressMiddleware({
    router: appRouter,
    createContext: createContext,
  }),
);
2 replies