$client is unknown

[robsel118]

I've followed the recommend setup for V9, however I don't get the auto-completion because $client is unknown. This happens on my own project, but also on the playground for this project.

I am using VS code. With V3 it was working before but not on V9.

Would you know what the issue is?

[robsel118]

Seems a definition file is needed: https://nuxt.com/docs/guide/directory-structure/plugins#advanced

[kylegl]

hey did you solve this? I am getting this in vscode V1.79.2 in V1.78.x $client is defined.

[wobsoriano]

@kylegl is this with trpc v9?

[ncpleslie]

I was struggling with the same issue. Here's how I fixed it. I am using tRPC 10, by the way.

Updated plugins/client.ts by exporting the client as a type.

import { createTRPCNuxtClient, httpBatchLink } from "trpc-nuxt/client";
import superjson from "superjson";
import { loggerLink } from "@trpc/client";
import type { AppRouter } from "~/server/trpc/routers";

export default defineNuxtPlugin(() => {
  /**
   * createTRPCNuxtClient adds a `useQuery` composable
   * built on top of `useAsyncData`.
   */
  const client = createTRPCNuxtClient<AppRouter>({
    transformer: superjson,
    links: [
      loggerLink({
        enabled: (opts) =>
          process.env.NODE_ENV === "development" ||
          (opts.direction === "down" && opts.result instanceof Error),
      }),
      httpBatchLink({
        url: "/api/trpc",
      }),
    ],
  });

  return {
    provide: {
      client,
    },
  };
});

export type client = ReturnType<typeof createTRPCNuxtClient<AppRouter>>;

Then added an index.d.ts to the root of the application.
Note the import statement includes "type"

import { type client } from "./plugins/client";

declare module "#app" {
  interface NuxtApp {
    $client: client;
  }
}

export {};

[wobsoriano]

@ncpleslie that's weird. Nuxt should auto-infer the client type 🤔

[ncpleslie]

Yip, I agree. Its obviously an issue with our (@kylegl @robsel118) set up but didn't want to see a closed issue without a potential solution.

Alternatively, according to this stack overflow thread, delete your node_modules and .nuxt directories. Reinstall and rerun the application. Restarting the TypeScript server may help.

This isn't an issue with trpc-nuxt but an issue with TypeScript and Nuxt.

[Teygeta]

I was struggling with the same issue. Here's how I fixed it. I am using tRPC 10, by the way.

Updated plugins/client.ts by exporting the client as a type.

import { createTRPCNuxtClient, httpBatchLink } from "trpc-nuxt/client";
import superjson from "superjson";
import { loggerLink } from "@trpc/client";
import type { AppRouter } from "~/server/trpc/routers";

export default defineNuxtPlugin(() => {
  /**
   * createTRPCNuxtClient adds a `useQuery` composable
   * built on top of `useAsyncData`.
   */
  const client = createTRPCNuxtClient<AppRouter>({
    transformer: superjson,
    links: [
      loggerLink({
        enabled: (opts) =>
          process.env.NODE_ENV === "development" ||
          (opts.direction === "down" && opts.result instanceof Error),
      }),
      httpBatchLink({
        url: "/api/trpc",
      }),
    ],
  });

  return {
    provide: {
      client,
    },
  };
});

export type client = ReturnType<typeof createTRPCNuxtClient<AppRouter>>;

Then added an index.d.ts to the root of the application. Note the import statement includes "type"

import { type client } from "./plugins/client";

declare module "#app" {
  interface NuxtApp {
    $client: client;
  }
}

export {};

insane workaround

[Teygeta]

Yip, I agree. Its obviously an issue with our (@kylegl @robsel118) set up but didn't want to see a closed issue without a potential solution.

Alternatively, according to this stack overflow thread, delete your node_modules and .nuxt directories. Reinstall and rerun the application. Restarting the TypeScript server may help.

This isn't an issue with trpc-nuxt but an issue with TypeScript and Nuxt.

I tried it and it still doesn't work

[Teygeta]

I solved the problem by comparing this recommended nuxt-trpc guide to my project, and indeed the plugins directory I named it plugin incorrectly. After renaming it I removed .nuxt and node_modules and then launched pnpm i. Later I launched pnpm nuxt prepare and restarted volar with f1 and then >Volar: restart vue server

[Rednas83]

I think it's better to use app.vue instead of pages/index.vue. I also had some strange issues when using pages/index.vue with useNuxtApp() and await

[estevanjantsk]

I had the same problem after I run in vscode (cmd+shift+p) Volar: Restart Vue Server it started to work.

[Rednas83]

I also asked for adding trpc functionality in the todos demo from atinux. It could use some upvotes😉
atinux/atidone#15

[ambrizals]

At least don't modify tsconfig.json if you need some extra configuration on typescript.
Because on my side, this not happen.

[JollyBanny]

I had the same problem. I've tried to disable modules step by step and after removing @nuxtjs/seo module everything worked.

[brendonmatos]

I’ve encountered a similar issue, but when using a specific srdDir configuration. It might be related to type generation from Nuxt itself.

[gcom-ryan]

import { type client } from "./plugins/client";

declare module "#app" {
  interface NuxtApp {
    $client: client;
  }
}

export {};

This fixed TRPC for our team. Thank you!

The whole app is built around TRPC, so if intellisense is broken, it leaves new team members in the dark about types and where to find them.

[razbakov]

httpBatchLink({
  url: "/api/trpc",
}),

throws this error: Object literal may only specify known properties, and 'url' does not exist in type 'HttpBatchLinkOptions'.

[wobsoriano]

Wha

httpBatchLink({
  url: "/api/trpc",
}),

throws this error: Object literal may only specify known properties, and 'url' does not exist in type 'HttpBatchLinkOptions'.

which trpc version are you on?

[razbakov]

@wobsoriano I had ^0.7.0 and update to ^0.10.22 fixed the issue