TRPC + Next.js Intl Error: Cannot read properties of undefined (reading '\_context')

Question

I have a problem using trpc to pass translations to my next component next-intl.

This is my i18n.ts:

import { notFound } from 'next/navigation';
import { trpc } from './utils/trpc';

type Locale = "en" | "de" | "cn" | "ar" | "dk" | "es" | "fi" | "fr" | "it" | "jp" | "kr" | "nl" | "no" | "pl" | "pt" | "ru" | "se" | "th" | "vn" | "tr";

const locales: Locale[] = ["en", "de", "cn", "ar", "dk", "es", "fi", "fr", "it", "jp", "kr", "nl", "no", "pl", "pt", "ru", "se", "th", "vn", "tr"];

export default async function getRequestConfig({ locale }: { locale: string }) {
  if (!locales.includes(locale as Locale)) return notFound();
  const messagesResponse = await trpc.translate.getMessages.useQuery({ locale: locale as Locale });
  const messages = messagesResponse.data?.reduce((acc: Record<string, string>, { translationKeyId, value }) => ({ ...acc, [translationKeyId]: value }), {}) || {};
  return { messages };
}

trpc-router.ts looks like:

export const appRouter = t.router({
  getUsers: t.procedure.query(async ({ ctx }) => {
    return await prisma.userData.findMany();
  }),
  translate: t.router({
    getMessages: t.procedure.input(z.object({ locale: z.string() })).query(async ({ input }) => {
      return await prisma.localeTranslation.findMany({
        where: { localeCode: input.locale },
      });
    }),
  })
});

I have error:

\[TRPC + Next.js Internationalization\] Error: Cannot read properties of undefined (reading '\_context')


   8 | export default async function getRequestConfig({ locale }: { locale: string }) {
   9 | if (!locales.includes(locale as Locale)) return notFound();
> 10 | const messagesResponse = await trpc.translate.getMessages.useQuery({ locale: locale as Locale });
     |                                                          ^
  11 | const messages = messagesResponse.data?.reduce((acc: Record<string, string>, { translationKeyId, value }) => ({ ...acc, [translationKeyId]: value }), {}) || {};
  12 | return { messages };
  13 | }

What I should fix when I use direct Prisma query is working without TRPC. My repository and live project are below: https://codesandbox.io/p/github/mlstoo/trpc-and-next-intl/main?file=%2Fsrc%2Fglobals.css%3A5%2C1&workspaceId=17faf47d-75bd-4a4b-ad64-1cdb3f3c5906 https://github.com/mlstoo/trpc-and-next-intl/blob/main/src/app/api/trpc/trpc-router.ts