Cannot start work in client side TypeScript type error when create the client.

[adammetal]

Environments:

Server side, (express app)

System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 797.79 MB / 7.57 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    npm: 8.12.1 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 108.0.5359.98
    Firefox: 108.0
  npmPackages:
    @trpc/server: ^10.5.0 => 10.5.0 
    typescript: ^4.9.3 => 4.9.3 

Client side (solidjs with vanilla client)

System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 645.66 MB / 7.57 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    npm: 8.12.1 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 108.0.5359.98
    Firefox: 108.0
  npmPackages:
    @trpc/client: ^10.7.0 => 10.7.0 
    @trpc/server: ^10.7.0 => 10.7.0 
    typescript: ^4.9.4 => 4.9.4

My code and the error:
I cannot even start the work on the client side because the typescript already complaining about types :(

My code on client:

import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../../engine/src/trpc';
 
const trpc = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: '/trpc',
    }),
  ],
});

And the server side trpc code (i'm trying to simplify but nothing works)

import { PrismaClient } from "@prisma/client";
import { initTRPC } from "@trpc/server";
import { z } from "zod";

const prisma = new PrismaClient();
const t = initTRPC.create();

const getImages = t.procedure.query(() => prisma.image.findMany({ orderBy: { createdAt: "desc" } }));

const getImageById = t.procedure
  .input(z.object({ id: z.number() }))
  .query(({ input }) => {
    const { id } = input;
    return prisma.image.findFirst({ where: { id }, include: { lines: true } });
  });

export const appRouter = t.router({
  getImages,
  getImageById
});

export type AppRouter = typeof appRouter;

And the errors on the client side:

Type 'CreateRouterInner<RootConfig<{ ctx: {}; meta: {}; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { getImages: BuildProcedure<"query", { ...; }, Image[]>; getImageById: BuildProcedure<...>; }>' does not satisfy the constraint 'Router<AnyRouterDef<AnyRootConfig, any>>'.
  The types returned by 'createCaller(...)' are incompatible between these types.
    Type '{ query: inferHandlerFn<{}>; mutation: inferHandlerFn<{}>; subscription: inferHandlerFn<{}>; } & DecoratedProcedureRecord<{ getImages: BuildProcedure<"query", { _config: RootConfig<...>; ... 5 more ...; _meta: {}; }, Image[]>; getImageById: BuildProcedure<...>; }>' is not assignable to type '{ query: inferHandlerFn<any>; mutation: inferHandlerFn<any>; subscription: inferHandlerFn<any>; } & DecoratedProcedureRecord<any>'.
      Type '{ query: inferHandlerFn<{}>; mutation: inferHandlerFn<{}>; subscription: inferHandlerFn<{}>; } & DecoratedProcedureRecord<{ getImages: BuildProcedure<"query", { _config: RootConfig<...>; ... 5 more ...; _meta: {}; }, Image[]>; getImageById: BuildProcedure<...>; }>' is not assignable to type '{ query: inferHandlerFn<any>; mutation: inferHandlerFn<any>; subscription: inferHandlerFn<any>; }'.
        Types of property 'query' are incompatible.
          Type 'inferHandlerFn<{}>' is not assignable to type 'inferHandlerFn<any>'.
            Types of parameters 'path' and 'path' are incompatible.
              Type 'TPath' is not assignable to type 'never'.
                Type 'string' is not assignable to type 'never'.ts(2344)

I don't get it, i followed the tutorials and everything.
Pls help. Thank you

[Madd0g]

I got it working a month or two ago, but now trying again with a new project and having the same problem, with:

• yarn monorepo
• client in vue app
• server as express middleware
• prisma

My error was slightly different: Types of property '_def' are incompatible.

I tried to simplify the implementation as much as possible, but couldn't figure it out.
Because 10.7.0 just came out, I tried going back with versions, tried 10.5, 10.4, 10.3, all had the same problem.

Eventually I tried the version that worked for me last time - 10.0.0-proxy-beta.12.
And bam - no more typescript error when passing AppRouter to createTRPCProxyClient.

I learned nothing, but it's working 🤷

[adammetal]

Thank you for the answer :) I'm a bit dissapointed (not in your answer, i think you did the best), because i hoped its not an other tool for react. I tried one of the starter code they provided and its works like charm. I don't know the difference, i tried to mimic the ts config, i tried to make my project into a monorepo with lerna, i tried to dig myself into the source code. Nothing works. My next move is rewrite my love project in this and hope for the best: https://github.com/OrJDev/create-jd-app. I miss the graphql with codegen but i like this new approach and i hope they gona realize at some point (with all my love and respect to react) the react is not the one frontend tool and not everybody tries to make ssg or ssr apps with next. I think maybe this tool in the future (i hope) will be more generalized, more developer friendly and gives better documentation and use cases. But i really like to give it a try.

[KATT]

trpc works fine w/o react and fine in monorepos.

You can look at some of the open monorepo examples out there, some listed in https://trpc.io/awesome

Might be that your problems aren't trpc related, can be something with prisma as well, prisma requires some special treatment in monorepos

[Madd0g]

Last time I tried it was in svelte and it worked perfectly from the very first time, I'm not sure if I started from scratch or from a starter project.

I have a feeling maybe there's a delicate setup step (maybe even undocumented) that we're both missing, because like you said, maybe 90% of people have a different setup, like react.

[OrJDev]

If you are looking for just SolidJS (not solidStart) you might wanna look at the vanilla branch of create jd app,
but yes it should be working fine and if you struggle with anything feel free to dm me on discord or open an issue.

I Personally recommend to use the main branch and create a SolidStart app instead of just SolidJS, it comes with more addons and features but its your call

[adammetal]

Thank you for all :) Yes now i'm moving my project into create-js-app and everything is working fine now. No type errors. I used the prisma and the trpc addons. Not just works and fantastic but no more type error with AppRouter. I don't know why its working. I'm really want to finish the first prototype of my app, but after i try to figure it out with some isolated examples. Maybe its prisma i don't know but when i just copy pasted the trpc getting started code into my backend without prisma, the errors was the same. Even the message was exactly the same. I think it was my setup i'm sure just can't find it why. But thank you all. :)

[Madd0g]

I have a feeling maybe there's a delicate setup step (maybe even undocumented) that we're both missing [...]

for anyone encountering an issue with frontend typescript complaining about type incompatibility, I had the same problem in yet another vue project, I tried everything I could think of, but then I saw this thread that mentioned strictNullChecks

// tsconfig.json
"strictNullChecks": true,

I went into my main backend tsconfig and added that and the problem was gone!

[KATT]

"strict": true is a prerequisite for tRPC to work well fwiw. We don't test it without it

[ixbalazs]

This happens because of a version mismatch...

I had @trpc dependencies specified like this in my frontend and backend separately:

frontend/package.json:
"@trpc/client": "^10.15.1",
"@trpc/next": "^10.15.1",
"@trpc/react-query": "^10.15.1",
"@trpc/server": "^10.15.1",

backend/package.json:
"@trpc/server": "^10.15.1",

And I got the exact same error mentioned above.

The problem was, that some of the deps was on 10.15.1 v, BUT the BE package upgraded to "10.29.1".

After I set 10.29.1 for each @trpc package, the error just gone.

[zyfyy]

wow!! even a little version change cause this, we must keep both server and client side the same version for now.
just upgrade from ^10.36.0 to "^10.37.1"

[Elliott-Chong]

THANK YOU OH LORD

[Security2431]

I truly appreciate your effort 🙌 I have updated the backend (BE) to the latest version, and it is finally functioning properly

[waldo2810]

holy shit. LEGEND

[g4n3sha5]

yeah man!!

[pmioduszewski]

I'm using turbo for monorepo, and the manypkg fix command fixed this issue.
more info about mismatched package versions in turbo repo

[pujitm]

manypkg check helped diagnose the issue in my turbo repo.

Other projects in the repo (not dependencies) were using different typescript versions, causing the monorepo to resolve a different TS version than the one indicated in the newer project stack.

For reference, most projects used typescript@^5.0.4, and changing all of them to use the same version (^5.2.2) fixed the error.

[tekagg]

This is almost always caused by a version mismatch between the client and server. It happened to me as well

[amanzrx4]

Having the same trpc version in client & server solved this issue for me

[elias123tre]

This worked for me! As well as removing @trpc/server in the client and vice versa

[jgb-solutions]

yep TRPC can be frustrating... I had to downgrade from the latest version because it broke my app. But still, it's open source, they don't force us to use it...

[amanzrx4]

calm down @akshatsabavat
I can understand, it moves really fast, maybe use an old version, once it's setup, building & integrating APIs will really be fast.

[KATT]

cc @amanzrx4 @jgb-solutions

• If y'all get random type errors when upgrading between a 10.x to another 10.y minor/patch - open an issue and just hold off upgrading for a bit until we've fixed it. No minor/patch releases should be breaking, we take semver seriously and try to fix any legit bugs within a day or two
• If you're on 11.x, we might be doing some random breaking changes that we keep track of on the migration page.
• If you're on a new project, I'd advice you to use a starter template or follow the setup guides carefully (and I'd advice v11 even if it might have some minor breaking changes - me and many others use it in prod already)
• If you're working for a company and need help, you can email sales@trpc.io and like... pay us... to help your team be more productive
• If you fix and issue for yourself and think the docs could've done a better job guiding you, click the edit button on the page where you think it should've existed and open a PR

We're a community and passion funded project and I prefer spending my (largely unpaid) evenings and weekends on new features and smashing bug over unpaid support, but I do feel bad that we aren't able to guide people more.

Also, sponsors are amazing and they have helped me pay out over ~$50k to other contributors to date. I've netted ~$20-30k to date personally (~10-15k post tax) over the last three years on a project I've worked almost daily on, this makes absolutely zero financial sense based on what I could've made in consulting or similar instead, but I love working on trpc.

Not sure what triggered me to do this monologue here and now, just wanted y'all to know we're doing our best.

(@akshatsabavat, you're banned indefinitely)