Website-Suche

reactjs - Kann meine Frontend-App mit tRPC auf Netlify nicht bauen

Ich benutze React Typescript und habe den tRPC-Dokumentationen für die Server-/Client-Einrichtung gefolgt, aber ich bekomme diesen Fehler. Weiß jemand, warum das beim Deployment passiert? Lokal funktioniert es einwandfrei.

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

Meine 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

Antwort #1

Es liegt daran, dass du trpc von deinem Backend importierst, was funktioniert, da du das Backend lokal kompiliert hast, diesen Schritt beim Deployment auf Netlify/Vercel jedoch übersprungen hast.

Antwort #2

Ich bekam diesen Fehler, weil mein Client node_modules im Backend-Ordner installiert haben musste. Das war lokal kein Problem, aber als ich das Frontend bereitgestellt habe, habe ich natürlich das Ausführen von npm i im Backend übersprungen. Ich benutze Vercel, um mein Create-React-App-tRPC-Frontend innerhalb meines GitHub-Monorepos bereitzustellen.

Verwandte Artikel