filyys Comments - Answer Overflow

return (
    <QueryClientProvider client={queryClient}>
      <trpc.Provider client={trpcClient} queryClient={queryClient}>
        {p.children}
      </trpc.Provider>
    </QueryClientProvider>
  );

return (
    <QueryClientProvider client={queryClient}>
      <trpc.Provider client={trpcClient} queryClient={queryClient}>
        {p.children}
      </trpc.Provider>
    </QueryClientProvider>
  );

5 replies

TtRPC

•Created by filyys on 8/1/2024 in #❓-help

tRPC & Next.js confused about error

Thanks a million! I got it fixed despite delay

12 replies

TtRPC

•Created by filyys on 8/1/2024 in #❓-help

tRPC & Next.js confused about error

yes, it appears the error is not there when I comment out the trpc layout.tsx and uncomment the original next.js template code layout.tsx

// This code works
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

// This code doesn't work
// const MyApp: AppType = ({ Component, pageProps }) => {
//   // return <Component {...pageProps} />;

//   return (
//     <html lang="en">
//       <body className={inter.className}>
//         <Component {...pageProps} />
//       </body>
//     </html>
//   );
// };

// export default trpc.withTRPC(MyApp);

// This code works
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

// This code doesn't work
// const MyApp: AppType = ({ Component, pageProps }) => {
//   // return <Component {...pageProps} />;

//   return (
//     <html lang="en">
//       <body className={inter.className}>
//         <Component {...pageProps} />
//       </body>
//     </html>
//   );
// };

// export default trpc.withTRPC(MyApp);

12 replies

TtRPC

•Created by filyys on 8/1/2024 in #❓-help

tRPC & Next.js confused about error

There are no hooks in my code, the error keeps showing up Full error

 ⨯ useState only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component
                if (props.trpc) {
                    return props.trpc;
                }
                const config = getClientConfig({});
                const queryClient = (0,_trpc_react_query_shared__WEBPACK_IMPORTED_MODULE_1__.getQueryClient)(config);
                const trpcClient = trpc.createClient(config);
                return {
                    abortOnUnmount: config.abortOnUnmount,
                    queryClient,
                    trpcClient,
                    ssrState: opts.ssr ? 'mounting' : false,
                    ssrContext: null
                };
            })', '(0,react__WEBPACK_IMPORTED_MODULE_2__.useState)' is undefined)
    at withTRPC(MyApp) (:21:83)
    at stringify (native)
digest: "381594184"
 GET / 500 in 56ms

 ⨯ useState only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/react-client-hook-in-server-component
                if (props.trpc) {
                    return props.trpc;
                }
                const config = getClientConfig({});
                const queryClient = (0,_trpc_react_query_shared__WEBPACK_IMPORTED_MODULE_1__.getQueryClient)(config);
                const trpcClient = trpc.createClient(config);
                return {
                    abortOnUnmount: config.abortOnUnmount,
                    queryClient,
                    trpcClient,
                    ssrState: opts.ssr ? 'mounting' : false,
                    ssrContext: null
                };
            })', '(0,react__WEBPACK_IMPORTED_MODULE_2__.useState)' is undefined)
    at withTRPC(MyApp) (:21:83)
    at stringify (native)
digest: "381594184"
 GET / 500 in 56ms