BillyBob
BillyBob
Explore posts from servers
RReactifluxPCProjectDiscovery CommunityTtRPCTTCTheo's Typesafe Cult
PostsComments
TTCTheo's Typesafe Cult
Created by BillyBob on 3/24/2024 in #questions
Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11] [ NextJS v14.1.X ]
@erik.gh Thanks for your help. I solved it anyway. see the above ^
22 replies
TTCTheo's Typesafe Cult
Created by BillyBob on 3/24/2024 in #questions
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/@[email protected]_@[email protected]/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 import server-only removed the debugging lines added as shown above and it worked.
22 replies
TTCTheo's Typesafe Cult
Created by BillyBob on 3/24/2024 in #questions
Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11] [ NextJS v14.1.X ]
No description
22 replies
TTCTheo's Typesafe Cult
Created by BillyBob on 3/24/2024 in #questions
Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11] [ NextJS v14.1.X ]
ive been investigating this with a senior friend of mine just now. It makes no sense at all. Its tRPC which is erroring but only when I upgrade NextJS past 14.1. We can see that the tRPC request within the middlware runs as expected but its when trying to render a RSC component with a tRPC call in it
22 replies
TTCTheo's Typesafe Cult
Created by BillyBob on 3/24/2024 in #questions
Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11] [ NextJS v14.1.X ]
done a pnpm store prune as well
22 replies
TTCTheo's Typesafe Cult
Created by BillyBob on 3/24/2024 in #questions
Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11] [ NextJS v14.1.X ]
No description
22 replies
TTCTheo's Typesafe Cult
Created by BillyBob on 3/24/2024 in #questions
Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11] [ NextJS v14.1.X ]
hm i just did a fresh git clone to a new folder and tested again and still getting the same error
22 replies
TTCTheo's Typesafe Cult
Created by BillyBob on 3/24/2024 in #questions
Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11] [ NextJS v14.1.X ]
ok so it works for you as expected? could you actually get a the /movies page up for example?
22 replies
TTCTheo's Typesafe Cult
Created by BillyBob on 3/24/2024 in #questions
Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11] [ NextJS v14.1.X ]
no wait i didnt push it...
22 replies
TTCTheo's Typesafe Cult
Created by BillyBob on 3/24/2024 in #questions
Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11] [ NextJS v14.1.X ]
its when i upgrade next it starts erroring
22 replies
TTCTheo's Typesafe Cult
Created by BillyBob on 3/24/2024 in #questions
Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11] [ NextJS v14.1.X ]
Hey @erik.gh thanks. But i think the latest pushed version is downgraded to nextjs v14.1.0
22 replies
TTCTheo's Typesafe Cult
Created by BillyBob on 3/24/2024 in #questions
Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11] [ NextJS v14.1.X ]
link to repo: https://github.com/lwears/ReelScore
22 replies
TTCTheo's Typesafe Cult
Created by BillyBob on 3/24/2024 in #questions
Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11] [ NextJS v14.1.X ]
it happens on every version after next v14.1.0
22 replies
TTCTheo's Typesafe Cult
Created by BillyBob on 3/24/2024 in #questions
Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11] [ NextJS v14.1.X ]
deleting all node_modules and reinstalling
22 replies
TTCTheo's Typesafe Cult
Created by BillyBob on 3/24/2024 in #questions
Server Error: client[procedureType] is not a function [ tRPC v10.45.2 OR v11] [ NextJS v14.1.X ]
hey erik. yes i have changing trpc versions (to latest v11) pruning pnpm
22 replies
TTCTheo's Typesafe Cult
Created by BillyBob on 3/1/2024 in #questions
Guidance / Guide / Repo with monorepo separate server & client NextJS with App Dir, tRPC
hey @erik.gh Would you be able to help me with this error? : https://discord.com/channels/966627436387266600/1221387449985400942
33 replies
TTCTheo's Typesafe Cult
Created by BillyBob on 3/24/2024 in #questions
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',
        })
      },
    }),
  ],
})
22 replies
TTCTheo's Typesafe Cult
Created by BillyBob on 3/1/2024 in #questions
Guidance / Guide / Repo with monorepo separate server & client NextJS with App Dir, tRPC
Thansk Erik
33 replies
TTCTheo's Typesafe Cult
Created by BillyBob on 3/1/2024 in #questions
Guidance / Guide / Repo with monorepo separate server & client NextJS with App Dir, tRPC
Would you be open to reviewing some of my code at some point? not ready yet but in the next few weeks maybe?
33 replies
TTCTheo's Typesafe Cult
Created by BillyBob on 3/1/2024 in #questions
Guidance / Guide / Repo with monorepo separate server & client NextJS with App Dir, tRPC
Hi Erik. sorry for the delay i didn't expect a response so quickly. So you helped me last week understand why i need a client side trpc connector. I set that up but was getting an unauthorised error because it was not sending the cookies. I thought i needed to add one of these fetchRequestHandlers that are in create-t3-app and create-t3-turbo. they add the context and headers, but they also have a reference to the appRouter in there (not the type). this - 
const handler = auth(async (req) =>
  fetchRequestHandler({
    endpoint: '/api/trpc',
    router: appRouter,
    req,
    createContext: () =>
      createTRPCContext({
        session: req.auth,
        headers: req.headers,
      }),
  }),
);
const handler = auth(async (req) =>
  fetchRequestHandler({
    endpoint: '/api/trpc',
    router: appRouter,
    req,
    createContext: () =>
      createTRPCContext({
        session: req.auth,
        headers: req.headers,
      }),
  }),
);
Anyway i got it working by just adding a 
          fetch(url, options) {
            return fetch(url, {
              ...options,
              credentials: 'include',
            })
          },
          fetch(url, options) {
            return fetch(url, {
              ...options,
              credentials: 'include',
            })
          },
to the trpc React provider / client trpc connector.
33 replies