filyys•4mo ago

tRPC & Next.js confused about error

Hey, I'm really new with next.js, react and trpc, I was trying to add tRPC into my small SSR next.js project to send data from the client to the server, following the tRPC Next.js examples is pretty tricky knowing close to nothing about it and I am getting a weird error. It doesn't tell me where it is, what file, I've tried mostly commenting out code from my page.tsx file and I still get the useState error? I'm not sure how to set up layout.tsx too... That's probably what I'm doing wrong but I don't know where to find out what is wrong layout.tsx

import type { Metadata } from "next";
import "../../styles/globals.css";

import type { AppType } from "next/app";
import { trpc } from "../utils/trpc";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

const MyApp: AppType = ({ Component, pageProps }) => {
  // return <Component {...pageProps} />;

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

export default trpc.withTRPC(MyApp);

import type { Metadata } from "next";
import "../../styles/globals.css";

import type { AppType } from "next/app";
import { trpc } from "../utils/trpc";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

const MyApp: AppType = ({ Component, pageProps }) => {
  // return <Component {...pageProps} />;

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

export default trpc.withTRPC(MyApp);

Solution:

For context, trpc does not officially support Nextjs App router. Instead of wrapping your component in trpc's HoC, you can create a client component provider and wrap your app with it. Look here https://github.com/trpc/trpc/issues/3297#issuecomment-1423905894...

GitHub

feat: Support RSC & App Layouts · Issue #3297 · trpc/trpc

Describe the feature you'd like to request We should make official support for Next 13 app layouts & RSC. Describe the solution you'd like to see Being able to transparently use tRPC id...

Jump to solution

8 Replies

kapitanluffy•4mo ago

try to read about server components. for context, all components under app/ are server components, adding interactivity such as useState requires it to be a client component. that is why it says you need to add a "use client" at the top of your component file

filyysOP•4mo ago

There are no client interactivity elements in the app directory from what I've checked, I've even removed everything from page.tsx and it still shows the error page.tsx

export default async function Home() {
  return (
    <div>test</div>
  );
}

export default async function Home() {
  return (
    <div>test</div>
  );
}

kapitanluffy•4mo ago

adding a side effect (such as hooks) is interactivity server components are compiled server side, so adding a hook on that will throw an error

filyysOP•4mo ago

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

The error isn't helping me find the useState that isn't anywhere

kapitanluffy•4mo ago

How about in layout.tsx? Are you using trpc? Have you checked if removing the trpc provider removes the error?

filyysOP•4mo ago

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);

Solution

kapitanluffy•4mo ago

GitHub

feat: Support RSC & App Layouts · Issue #3297 · trpc/trpc

Describe the feature you'd like to request We should make official support for Next 13 app layouts & RSC. Describe the solution you'd like to see Being able to transparently use tRPC id...

filyysOP•4mo ago

Thanks a million! I got it fixed despite delay