BillyBob
BillyBob
TtRPC
Created by BillyBob on 3/24/2024 in #❓-help
Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11 ] [ NextJS v14.1.X ]
I solved it. This was due to having use server at the top of my server.ts file for interacting with tRPC on the server side. I replaced it with import server-only to discover this issue I followed the error to the code within node_modules node_modules/.pnpm/@trpc+client@11.0.0-next.320_@trpc+server@11.0.0-next.320/node_modules/@trpc/client/dist/createTRPCClient.mjs added some debugging like so:
*/ function createTRPCClientProxy(client) {
return createFlatProxy((key)=>{
if (client.hasOwnProperty(key)) {
return client[key];
}
if (key === '__untypedClient') {
return client;
}
return createRecursiveProxy(({ path , args })=>{
const pathCopy = [
key,
...path
];
const procedureType = clientCallTypeToProcedureType(pathCopy.pop());
const fullPath = pathCopy.join('.');
console.log({client})
console.log({procedureType})
console.log({fullPath})
console.log({pathCopy: pathCopy.pop()})
if (!client[procedureType]) {
return;
}
return client[procedureType](fullPath, ...args);
});
});
}
*/ function createTRPCClientProxy(client) {
return createFlatProxy((key)=>{
if (client.hasOwnProperty(key)) {
return client[key];
}
if (key === '__untypedClient') {
return client;
}
return createRecursiveProxy(({ path , args })=>{
const pathCopy = [
key,
...path
];
const procedureType = clientCallTypeToProcedureType(pathCopy.pop());
const fullPath = pathCopy.join('.');
console.log({client})
console.log({procedureType})
console.log({fullPath})
console.log({pathCopy: pathCopy.pop()})
if (!client[procedureType]) {
return;
}
return client[procedureType](fullPath, ...args);
});
});
}
From here I got a new error. Which was saying the server.ts tRPC connecter was exporting a non-async function, which you cannot do if marking the file at the top with use server I removed the use server from the top, replaced with use server-only removed the debugging lines added as shown above and it worked.
7 replies
TtRPC
Created by BillyBob on 3/24/2024 in #❓-help
Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11 ] [ NextJS v14.1.X ]
No description
7 replies
TtRPC
Created by emil on 7/5/2023 in #❓-help
TypeError: client[procedureType] is not a function
thanks @emil Here is my current issue: https://discord.com/channels/867764511159091230/1221402424405790780 If you can help in any way its appreciated
16 replies
TtRPC
Created by emil on 7/5/2023 in #❓-help
TypeError: client[procedureType] is not a function
because in all the examples they access the appRouter in there, but if they are separated then how can that be done
16 replies
TtRPC
Created by emil on 7/5/2023 in #❓-help
TypeError: client[procedureType] is not a function
Are you using NextJS? how did you setup your api/trpc/[trpc] if so
16 replies
TtRPC
Created by emil on 7/5/2023 in #❓-help
TypeError: client[procedureType] is not a function
same
16 replies
TtRPC
Created by emil on 7/5/2023 in #❓-help
TypeError: client[procedureType] is not a function
Thanks! the versions are tthe same at least in my case. Do you guys have separated BE/server and client ?
16 replies
TtRPC
Created by BillyBob on 3/24/2024 in #❓-help
Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11 ] [ NextJS v14.1.X ]
7 replies
TtRPC
Created by BillyBob on 3/24/2024 in #❓-help
Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11 ] [ NextJS v14.1.X ]
Here is my server link:
export const api = createTRPCProxyClient<AppRouter>({
transformer: superjson,
links: [
loggerLink({
enabled: (op) =>
env.ENV === 'development' ||
(op.direction === 'down' && op.result instanceof Error),
}),
httpBatchLink({
url: 'http://localhost:4000/trpc',
headers() {
return {
cookie: cookies().toString(),
'x-trpc-source': 'rsc',
}
},
fetch(url, options) {
return fetch(url, {
...options,
credentials: 'include',
})
},
}),
],
})
export const api = createTRPCProxyClient<AppRouter>({
transformer: superjson,
links: [
loggerLink({
enabled: (op) =>
env.ENV === 'development' ||
(op.direction === 'down' && op.result instanceof Error),
}),
httpBatchLink({
url: 'http://localhost:4000/trpc',
headers() {
return {
cookie: cookies().toString(),
'x-trpc-source': 'rsc',
}
},
fetch(url, options) {
return fetch(url, {
...options,
credentials: 'include',
})
},
}),
],
})
7 replies
TtRPC
Created by emil on 7/5/2023 in #❓-help
TypeError: client[procedureType] is not a function
or do you have a link to your repo?
16 replies
TtRPC
Created by emil on 7/5/2023 in #❓-help
TypeError: client[procedureType] is not a function
what as the issue ? i am getting the same problem when upgrading next to anything newer than 14.1.0
16 replies
TtRPC
Created by emil on 7/5/2023 in #❓-help
TypeError: client[procedureType] is not a function
@emil Did you ever solve this?
16 replies
TtRPC
Created by BillyBob on 3/21/2024 in #❓-help
Type '[]' has no properties in common with type 'MutateOptions<{ id: string....
ype '[]' has no properties in common with type 'MutateOptions<{ id: string; tmdbId: number; createdAt: Date; updatedAt: Date; title: string; posterPath: string | null; releaseDate: Date | null; tmdbScore: number; score: number; watched: boolean; userId: string; }, TRPCClientErrorLike<...>, { ...; }, unknown> & MutateOptions<...>'
ype '[]' has no properties in common with type 'MutateOptions<{ id: string; tmdbId: number; createdAt: Date; updatedAt: Date; title: string; posterPath: string | null; releaseDate: Date | null; tmdbScore: number; score: number; watched: boolean; userId: string; }, TRPCClientErrorLike<...>, { ...; }, unknown> & MutateOptions<...>'
3 replies
TtRPC
Created by Tom on 8/12/2023 in #❓-help
Return TRPC Error from NextJS middleware
also not sure what changed. but now a simple
headers() {
return {
cookie: cookies().toString(),
}
},
headers() {
return {
cookie: cookies().toString(),
}
},
seems to work
39 replies
TtRPC
Created by Finn on 1/29/2024 in #❓-help
Using tRPC in Next.js Middleware
me too. i wonder if they changed something. because i am sure this didnt work before,
headers() {
return {
cookie: cookies().toString(),
}
},
headers() {
return {
cookie: cookies().toString(),
}
},
Because now all i need is this ^
16 replies
TtRPC
Created by Finn on 1/29/2024 in #❓-help
Using tRPC in Next.js Middleware
are you on 14.1 ?
16 replies
TtRPC
Created by Finn on 1/29/2024 in #❓-help
Using tRPC in Next.js Middleware
interesting that this works
const session = await api.session.validate.query({
sessionId: authCookie.value,
});
const session = await api.session.validate.query({
sessionId: authCookie.value,
});
to call tRPC in the nextJS middleware was why I needed to change the headers
16 replies
TtRPC
Created by Finn on 1/29/2024 in #❓-help
Using tRPC in Next.js Middleware
i had to do this:
headers(opts) {
// Any of the passed operations can override the headers
const headersOverride = opts.opList.find(
(op) => op.context?.headersOverride
)?.context.headersOverride as Record<string, string> | undefined



if (headersOverride) {
// console.log('headersOverride', headersOverride)
// console.log('headers', Object.fromEntries(headers()))
delete headersOverride['content-length']
delete headersOverride['content-type']
return headersOverride
}

const h = Object.fromEntries(headers())
delete h['content-length']
delete h['content-type']

return h
}
headers(opts) {
// Any of the passed operations can override the headers
const headersOverride = opts.opList.find(
(op) => op.context?.headersOverride
)?.context.headersOverride as Record<string, string> | undefined



if (headersOverride) {
// console.log('headersOverride', headersOverride)
// console.log('headers', Object.fromEntries(headers()))
delete headersOverride['content-length']
delete headersOverride['content-type']
return headersOverride
}

const h = Object.fromEntries(headers())
delete h['content-length']
delete h['content-type']

return h
}
16 replies
TtRPC
Created by Finn on 1/29/2024 in #❓-help
Using tRPC in Next.js Middleware
So you are not doing anything in Middleware right now?
16 replies
TtRPC
Created by Tom on 8/12/2023 in #❓-help
Return TRPC Error from NextJS middleware
Yes i am having to do this to get it to work
headers(opts) {
// Any of the passed operations can override the headers
const headersOverride = opts.opList.find(
(op) => op.context?.headersOverride
)?.context.headersOverride as Record<string, string> | undefined



if (headersOverride) {
// console.log('headersOverride', headersOverride)
// console.log('headers', Object.fromEntries(headers()))
delete headersOverride['content-length']
delete headersOverride['content-type']
return headersOverride
}

const h = Object.fromEntries(headers())
delete h['content-length']
delete h['content-type']

return h
}
headers(opts) {
// Any of the passed operations can override the headers
const headersOverride = opts.opList.find(
(op) => op.context?.headersOverride
)?.context.headersOverride as Record<string, string> | undefined



if (headersOverride) {
// console.log('headersOverride', headersOverride)
// console.log('headers', Object.fromEntries(headers()))
delete headersOverride['content-length']
delete headersOverride['content-type']
return headersOverride
}

const h = Object.fromEntries(headers())
delete h['content-length']
delete h['content-type']

return h
}
seems messy
39 replies