Open robsel118 opened 1 year ago
Seems a definition file is needed: https://nuxt.com/docs/guide/directory-structure/plugins#advanced
hey did you solve this? I am getting this in vscode V1.79.2 in V1.78.x $client is defined.
@kylegl is this with trpc v9?
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 {};
@ncpleslie that's weird. Nuxt should auto-infer the client type 🤔
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 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 theclient
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
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
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
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
I had the same problem after I run in vscode (cmd+shift+p) Volar: Restart Vue Server
it started to work.
I also asked for adding trpc functionality in the todos demo from atinux. It could use some upvotes😉 https://github.com/Atinux/nuxt-todos-edge/issues/15
At least don't modify tsconfig.json if you need some extra configuration on typescript. Because on my side, this not happen.
I had the same problem. I've tried to disable modules step by step and after removing @nuxtjs/seo
module everything worked.
I’ve encountered a similar issue, but when using a specific srdDir configuration. It might be related to type generation from Nuxt itself.
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.
httpBatchLink({
url: "/api/trpc",
}),
throws this error: Object literal may only specify known properties, and 'url' does not exist in type 'HttpBatchLinkOptions'.
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?
@wobsoriano I had ^0.7.0 and update to ^0.10.22 fixed the issue
I discovered that defining plugin on client side (<trpc-client-file>.client.ts
) doesn't throw error about unknown type, but then trpc isn't supported by SSR.
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?