Cannot build my frontend app with tRPC on netlify

Question

I am using React Typescript and I followed the tRPC docs for the server/client setup but I am getting this error. Does anyone know why this happens when deploying? It works fine when I am using it locally?

8:41:46 AM: TS2339: Property 'createClient' does not exist on type '"useContext collides with a built-in method, you should rename this router or procedure on your backend" | "Provider collides with a built-in method, you should rename this router or procedure on your backend" | "createClient collides with a built-in method, you should rename this router or procedure on your backend...'.
8:41:46 AM:   Property 'createClient' does not exist on type '"useContext collides with a built-in method, you should rename this router or procedure on your backend"'.
8:41:46 AM:     42 |   const [queryClient] = useState(() => new QueryClient());
8:41:46 AM:     43 |   const [trpcClient] = useState(() =>
8:41:46 AM:   > 44 |     trpc.createClient({
8:41:46 AM:        |          ^^^^^^^^^^^^
8:41:46 AM:     45 |       links: [
8:41:46 AM:     46 |         httpBatchLink({
8:41:46 AM:     47 |           url: `${process.env.REACT_APP_BACKEND_URL}/trpc`,
8:41:46 AM: ​
8:41:46 AM:   "build.command" failed        

My App.tsx

export default function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: `${process.env.REACT_APP_BACKEND_URL}/trpc`,
        }),
      ],
    })
  );

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>    
........... rest of code here



        

Dislodge

Answer 1

It's because you're importing trpc from your backend, which works since you've compiled the backend locally but skipped that step when deploying on Netlify/Vercel.

Prosecution

Answer 2

I was getting this error because my client needed node_modules to be installed on backend folder. This wasn't an issue locally but when I deployed the frontend obviously I skipped doing npm i on the backend. I am using vercel to deploy my create-react-app tRPC frontend, inside my github monorepo.

Tallbott

Answer 3

A potential solution might involve ensuring that TypeScript references are properly set up for the frontend project within its tsconfig.json file.

You might want to consider following the guidelines provided in the "The challenge" section of this react-vite-trpc template, and this should likely set you on the right path.

The thing that matters is pointing the server's tsconfig inside the references array in the frontend's tsconfig

People