Error "TRPCClientError: request failed" when building a Next.js app

[hmbrg]

When trying to build my Next.js project, I'm getting the following error:

TRPCClientError: request to http://localhost:3000/api/trpc/post.test?batch=1&input=%7B%220%22%3A%7B%22json%22%3Anull%2C%22meta%22%3A%7B%22values%22%3A%5B%22undefined%22%5D%7D%7D%7D failed, reason: connect ECONNREFUSED ::1:3000
    at Function.from (/Users/matthias/Code/nx/agracheck/node_modules/.pnpm/@trpc+client@9.23.2_@trpc+server@9.23.2/node_modules/@trpc/client/dist/TRPCClientError-e9bf96e9.cjs.prod.js:69:14)
    at /Users/matthias/Code/nx/agracheck/node_modules/.pnpm/@trpc+client@9.23.2_@trpc+server@9.23.2/node_modules/@trpc/client/links/httpBatchLink/dist/trpc-client-links-httpBatchLink.cjs.prod.js:208:50
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  originalError: FetchError: request to http://localhost:3000/api/trpc/post.test?batch=1&input=%7B%220%22%3A%7B%22json%22%3Anull%2C%22meta%22%3A%7B%22values%22%3A%5B%22undefined%22%5D%7D%7D%7D failed, reason: connect ECONNREFUSED ::1:3000
      at ClientRequest.<anonymous> (/Users/matthias/Code/nx/agracheck/node_modules/.pnpm/next@12.1.2_4ee95308deca1889961de2ade43e18f6/node_modules/next/dist/compiled/node-fetch/index.js:1:64142)
      at ClientRequest.emit (node:events:527:28)
      at Socket.socketErrorListener (node:_http_client:454:9)
      at Socket.emit (node:events:527:28)
      at emitErrorNT (node:internal/streams/destroy:164:8)
      at emitErrorCloseNT (node:internal/streams/destroy:129:3)
      at processTicksAndRejections (node:internal/process/task_queues:83:21) {
    type: 'system',
    errno: 'ECONNREFUSED',
    code: 'ECONNREFUSED'
  },
  shape: undefined,
  data: undefined,
  isDone: false,
  [cause]: FetchError: request to http://localhost:3000/api/trpc/post.test?batch=1&input=%7B%220%22%3A%7B%22json%22%3Anull%2C%22meta%22%3A%7B%22values%22%3A%5B%22undefined%22%5D%7D%7D%7D failed, reason: connect ECONNREFUSED ::1:3000
      at ClientRequest.<anonymous> (/Users/matthias/Code/nx/agracheck/node_modules/.pnpm/next@12.1.2_4ee95308deca1889961de2ade43e18f6/node_modules/next/dist/compiled/node-fetch/index.js:1:64142)
      at ClientRequest.emit (node:events:527:28)
      at Socket.socketErrorListener (node:_http_client:454:9)
      at Socket.emit (node:events:527:28)
      at emitErrorNT (node:internal/streams/destroy:164:8)
      at emitErrorCloseNT (node:internal/streams/destroy:129:3)
      at processTicksAndRejections (node:internal/process/task_queues:83:21) {
    type: 'system',
    errno: 'ECONNREFUSED',
    code: 'ECONNREFUSED'
  }
}

My withTRPC config looks like this:

import { withTRPC as withOriginalTRPC } from '@trpc/next';
import superjson from 'superjson';
import { AppRouter } from '../routers/_app';

export const withTRPC = withOriginalTRPC<AppRouter>({
  config({ ctx }) {
    if (typeof window !== 'undefined') {
      // during client requests
      return {
        url: '/api/trpc',
      };
    }
    // during SSR below

    // optional: use SSG-caching for each rendered page (see caching section for more details)
    const ONE_DAY_SECONDS = 60 * 60 * 24;
    ctx?.res?.setHeader(
      'Cache-Control',
      `s-maxage=1, stale-while-revalidate=${ONE_DAY_SECONDS}`
    );

    // The server needs to know your app's full url
    // On render.com you can use `http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}/api/trpc`
    const url = process.env.VERCEL_URL
      ? `https://${process.env.VERCEL_URL}/api/trpc`
      : 'http://localhost:3000/api/trpc';

    return {
      url,
      /**
       * @link https://trpc.io/docs/data-transformers
       */
      transformer: superjson,
      /**
       * @link https://react-query.tanstack.com/reference/QueryClient
       */
      // queryClientConfig: {
      //   defaultOptions: {
      //     queries: { suspense: false, useErrorBoundary: true },
      //     mutations: { useErrorBoundary: true },
      //   },
      // },
      headers: () => {
        if (ctx?.req) {
          // on ssr, forward client's headers to the server
          return {
            ...ctx.req.headers,
            'x-ssr': '1',
          };
        }
        return {};
      },
    };
  },
  /**
   * @link https://trpc.io/docs/ssr
   */
  ssr: true,
});

This is the Next.js page that throws the error:

export function Index(props: InferGetStaticPropsType<typeof getStaticProps>) {
  const { data } = trpc.useQuery(['post.test']);
  const { t } = useTranslation('common');

  return (
    <>
      <h1>
        {t('h1')} {data?.test}
      </h1>
      <SuspenseBoundary selector="post.test">
        <span>{JSON.stringify(data)}</span>
      </SuspenseBoundary>

      <Auth />
    </>
  );
}

export const getStaticProps: GetStaticProps = async (ctx) => {
  const ssg = await createSSGHelpers();

  await ssg.fetchQuery('post.test');

  return {
    props: {
      trpcState: ssg.dehydrate(),
    },
  };
};

export default Index;

Thanks for looking into this!

[KATT]

You can't use getServerSideProps or getStaticProps with ssr: true, see #596 and https://trpc.io/docs/caching#app-caching for an alternative approach

[hmbrg]

Thanks for answering! Sorry that I missed that. Are there plans to allow enabeling SSR for specific site like this for example: Page.ssr = true?

[KATT]

I've played around with it, but it adds a lot of complexity.

The way I would do it is to have two separate apps - one static for marketing site etc and one SSR for your authz site

[hmbrg]

Would this architecture decision also play well with an e-commerce app, where all product pages are static except components that depend on a user being logged in?

[KATT]

🤔

SSR plus swr headers should work well for all product pages

[hmbrg]

Sounds great, but this is only supported by vercel right?

[andrewhamon]

I'm bumping into the same issue after setting up tRPC in a freshly generated nextjs app. I am not using getServerSideProps at all, I basically just followed the guide for nextjs (which sets ssr: true by default in the example config).

Here is the error I'm seeing in the logs:

TRPCClientError: Unexpected end of JSON input
    at TRPCClientError.from (file:///Users/andrewhamon/code/fullstack-template/node_modules/@trpc/client/dist/transformResult-b10d288d.mjs:13:16)
    at file:///Users/andrewhamon/code/fullstack-template/node_modules/@trpc/client/dist/links/httpBatchLink.mjs:200:64
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  meta: undefined,
  shape: undefined,
  data: undefined,
  [cause]: SyntaxError: Unexpected end of JSON input
      at JSON.parse (<anonymous>)
      at Response.json (node:internal/deps/undici/undici:6160:23)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
}

in the actual app, i just see it stuck in the loading state. If i switch to a new tab and then return, that does something (re-renders the component maybe?) which allows the page to load fully. Its a bit weird.

I published my repo, here is the commit where I add tRPC.

Edit: I'm getting the same error even with an app generated by create-t3-app so that gives me some confidence that I don't have any obvious misconfigurations.

Edit 2: i must be blind, my error is not even the same as the OP 🤦

[citypaul]

@andrewhamon did you ever get to the bottom of this issue at all? It turns out I'm having the same issue as you I think, and I'm a bit puzzled as to the issue. If I open a new tab and return though, the component re-renders and it's all working. Did you ever figure out what was going on here?

[qqqllppp]

Hi @andrewhamon did you managed to solve it? I am also running into the same issue.

TRPCClientError: Unexpected end of JSON input

[artem-simutin]

Same here... Any updates? 🤔🤔🤔

[Pastoray]

I had the same problem i just restarted the server and it worked... that was annoying

[BrennerSpear]

I'm getting a TRPCClientError: Converting circular structure to JSON and not sure why, I think this is related?

[KXLAA]

I you are using prisma make sure prisma generate is run on every build. You can do this by adding this command: "postinstall": "prisma generate" to your package.json

[bursteways]

I'm seeing this error when doing a production build of my Next.js app (13).

Node v18.12.1

Things seem to be working fine locally - yarn dev.

However, no SSR requests are working when doing:

• yarn build
• yarn start

Here's a code snippet of my api file:

// api.ts
httpBatchLink({
          // The server needs to know your app's full url
          url: `${getBaseUrl()}/api/trpc`,
          /**
           * Set custom request headers on every request from tRPC
           * @link https://trpc.io/docs/v10/header
           */
          headers() {
            if (ctx?.req) {
              // To use SSR properly, you need to forward the client's headers to the server
              // This is so that you can pass through things like cookies when we're server-side
              // rendering
              // If you're using Node 18, omit the "connection" header
              const {
                // eslint-disable-next-line @typescript-eslint/no-unused-vars
                connection: _connection,
                ...headers
              } = ctx.req.headers;
              return {
                ...headers,
                // Optional: inform server that it's an SSR request
                'x-ssr': '1',
              };
            }
            return {};
          },

Million dollar question - why does this not work with a bundled version? Is anyone else having this issue?

[Tripex48]

I am having the same issue.

Created a standard T3 Stack app with yarn create t3-app, adding tRPC per the selection menu.

As soon as you change ssr: false to ssr: true (https://trpc.io/docs/nextjs/ssr), no SSR requests succeed when using yarn build and yarn start.

[TryBlock]

For me it works if I use the internal address or 127.0.0.1 instead of localhost

const getBaseUrl = () => {
  if (typeof window !== 'undefined') return ''; // browser should use relative url
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  if (process.env.INTERNAL_ADDRESS) return `http://${process.env.INTERNAL_ADDRESS}:${process.env.PORT ?? 3000}`;
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

[coycoylaniba]

Hello guys, has anyone fixed this issue? I'm also getting this error, BUT only if not authenticated in clerk :3

[qbit891]

I fixed this by moving the middleware.ts file to the root folder. Initially it was in my ./src folder.

[thibgn]

With a fresh create-t3 app and Clerk installed I had the same issue and I can confirm this fixed it.

[janwirth]

My problem was that the url for the TRPC provider was configured incorrectly and causing a CORS error. I should not have used the process.env.VERCEL_PUBLIC_URL

[nvwebd]

Hi all.

To anybody searching for info:

I've added a custom port to next which broke TRCP ( I have multiple dev processes running and I wanted to give one of the apps a custom port for convenience ).

[avarayr]

Future readers of this thread, if your tRPC SSR works on dev but breaks in prod, and you get an error fetch failed, your culprit is likely the url that you pass to your httpLink. Look where you initialize the createTRPCNext, find the ending link, it's likely something like this

const getBaseUrl = () => {
  if (typeof window !== "undefined") return ""; // browser should use relative url
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

During build time, and during SSR/ISR, tRPC is going to need to make a fetch request to your backend (i.e. your nextjs server) and it needs a url. If you're running serverless functions, you will need to pass in the url manually, but most of the time 127.0.0.1:${process.env.PORT ?? 3000} should work

If you're running in standalone mode (for example, custom hosting via docker) you might need to replace localhost with 127.0.0.1.

Your error is in that function, play with it and you should be able to solve it.