wleistra•7d ago

Cannot read __untypedClient from undefined error when try to update to latest 11.rc### versions

We are using TRPC with react and we got everything running with the latest versions from tanstack/react-query, but every time I try to update our trpc packages: "@trpc/client": "11.0.0-rc.660", "@trpc/react-query": "11.0.0-rc.660", "@trpc/server": "11.0.0-rc.660", To their latest builds we get an uncaught exception on the trpc.Provider component that it cannot read __untypedClient from undefined. I have tried to Google and check GitHub issues if someone faced the same or not, but to no avail. Is there someone out there who could point me some things to fix, check or otherwise to get me unstuck from the 660 builds?

23 Replies

Nick•7d ago

That actually sounds like you're missing a provider or haven't created the client/provider properly Can you share a repro?

wleistraOP•7d ago

I would not know where to start to get even something remotely close to our setup in StackBlitz or similar... but i will share some code snippets i think are relevant maybe it is something very obvious: We have a file named trpc.ts that contains the following:

import type { AppRouter } from '@our-api';
import { createTRPCReact } from '@trpc/react-query';
import type { inferRouterOutputs } from '@trpc/server';

export type RouterOutputs = inferRouterOutputs<AppRouter>;

export const trpc = createTRPCReact<AppRouter>();

import type { AppRouter } from '@our-api';
import { createTRPCReact } from '@trpc/react-query';
import type { inferRouterOutputs } from '@trpc/server';

export type RouterOutputs = inferRouterOutputs<AppRouter>;

export const trpc = createTRPCReact<AppRouter>();

then we have a QueryProvider.tsx file that contains

import type { ReactNode } from 'react';
import React, { useState } from 'react';

import { createQueryClient, useTRPCClientLinks } from '@/utils';
import { QueryClientProvider } from '@tanstack/react-query';

import { trpc } from './trpc';

const queryClient = createQueryClient();

type CouponsQueryProviderProps = {
  children: ReactNode;
};

export const CouponsQueryProvider = ({ children }: CouponsQueryProviderProps) => {
  const links = useTRPCClientLinks(process.env.COUPONS_API_URL ?? '');
  const [trpcClient] = useState(trpc.createClient({ links }));

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

import type { ReactNode } from 'react';
import React, { useState } from 'react';

import { createQueryClient, useTRPCClientLinks } from '@/utils';
import { QueryClientProvider } from '@tanstack/react-query';

import { trpc } from './trpc';

const queryClient = createQueryClient();

type CouponsQueryProviderProps = {
  children: ReactNode;
};

export const CouponsQueryProvider = ({ children }: CouponsQueryProviderProps) => {
  const links = useTRPCClientLinks(process.env.COUPONS_API_URL ?? '');
  const [trpcClient] = useState(trpc.createClient({ links }));

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

the @/utils function createQueryClient is defined as:

import { MutationCache, QueryCache, QueryClient } from '@tanstack/react-query';
import { TRPCClientError } from '@trpc/client';

import { CredentialsHandler } from '../credentials';

export const createQueryClient = () => {
  const unauthorizedHandlerOptions = {
    onError: (error: unknown) => {
      if (error instanceof TRPCClientError && error.data?.code === 'UNAUTHORIZED') {
        const credentialsHandler = CredentialsHandler.getInstance();

        credentialsHandler.clearCredentials();

        window.location.pathname = '/login';
      }
    },
  };

  return new QueryClient({
    queryCache: new QueryCache(unauthorizedHandlerOptions),
    mutationCache: new MutationCache(unauthorizedHandlerOptions),
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        staleTime: 30 * 1000,
        retry(failureCount, error) {
          if (error instanceof TRPCClientError) {
            const { data } = error;
            if (data?.httpStatus >= 400 && data?.httpStatus < 500) {
              return false;
            }
          }

          return failureCount < 3;
        },
      },
    },
  });
};

import { MutationCache, QueryCache, QueryClient } from '@tanstack/react-query';
import { TRPCClientError } from '@trpc/client';

import { CredentialsHandler } from '../credentials';

export const createQueryClient = () => {
  const unauthorizedHandlerOptions = {
    onError: (error: unknown) => {
      if (error instanceof TRPCClientError && error.data?.code === 'UNAUTHORIZED') {
        const credentialsHandler = CredentialsHandler.getInstance();

        credentialsHandler.clearCredentials();

        window.location.pathname = '/login';
      }
    },
  };

  return new QueryClient({
    queryCache: new QueryCache(unauthorizedHandlerOptions),
    mutationCache: new MutationCache(unauthorizedHandlerOptions),
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        staleTime: 30 * 1000,
        retry(failureCount, error) {
          if (error instanceof TRPCClientError) {
            const { data } = error;
            if (data?.httpStatus >= 400 && data?.httpStatus < 500) {
              return false;
            }
          }

          return failureCount < 3;
        },
      },
    },
  });
};

and the useTRPCClientLinks file imported in the QueryProvider.tsx file is like this:

import { useState } from 'react';

import { getFetch, httpLink, splitLink, unstable_httpSubscriptionLink } from '@trpc/client';

import { CredentialsHandler } from '../credentials';

import { usePosthog } from './usePosthog';

export const useTRPCClientLinks = (url: string) => {
  const posthog = usePosthog();

  const [links] = useState(() => {
    const http = httpLink({
      url,
      fetch: async (input, init) => {
        const fetch = getFetch();
        return fetch(input, { ...init, credentials: 'include' });
      },
      headers: () => {
        const originURL = window.location.href;
        const credentialsHandler = CredentialsHandler.getInstance();
        let parsedReleaseState: string = 'unknown';
        try {
          const parsed = JSON.parse(window?.localStorage.getItem('releaseState') || '{}');
          parsedReleaseState = parsed?.fetchedRelease;
        } catch {
          parsedReleaseState = 'unknown';
        }

        return {
          'origin-url': originURL,
          ...(credentialsHandler.getStoredCredentials() ?? {}),
          'posthog-session-recording-url': posthog.get_session_replay_url({ withTimestamp: true }),
          'frontend-version': parsedReleaseState,
        };
      },
    });

    return [
      splitLink({
        condition: (op) => op.type === 'subscription',
        true: unstable_httpSubscriptionLink({
          url,
        }),
        false: http,
      }),
    ];
  });

  return links;
};

import { useState } from 'react';

import { getFetch, httpLink, splitLink, unstable_httpSubscriptionLink } from '@trpc/client';

import { CredentialsHandler } from '../credentials';

import { usePosthog } from './usePosthog';

export const useTRPCClientLinks = (url: string) => {
  const posthog = usePosthog();

  const [links] = useState(() => {
    const http = httpLink({
      url,
      fetch: async (input, init) => {
        const fetch = getFetch();
        return fetch(input, { ...init, credentials: 'include' });
      },
      headers: () => {
        const originURL = window.location.href;
        const credentialsHandler = CredentialsHandler.getInstance();
        let parsedReleaseState: string = 'unknown';
        try {
          const parsed = JSON.parse(window?.localStorage.getItem('releaseState') || '{}');
          parsedReleaseState = parsed?.fetchedRelease;
        } catch {
          parsedReleaseState = 'unknown';
        }

        return {
          'origin-url': originURL,
          ...(credentialsHandler.getStoredCredentials() ?? {}),
          'posthog-session-recording-url': posthog.get_session_replay_url({ withTimestamp: true }),
          'frontend-version': parsedReleaseState,
        };
      },
    });

    return [
      splitLink({
        condition: (op) => op.type === 'subscription',
        true: unstable_httpSubscriptionLink({
          url,
        }),
        false: http,
      }),
    ];
  });

  return links;
};

wleistraOP•7d ago

My assumption is that it fails here:

wleistraOP•7d ago

all the code works on version 11.0.0-rc.660 but when updating to the latest 11.0.0-rc.688 it fails with the error:

Cannot read properties of undefined (reading '__untypedClient')

The above error occurred in the <TRPCProvider> component:

    at TRPCProvider (https://localhost:2013/coupons.dev.js:29544:17)
    at QueryProvider (https://localhost:2013/coupons.dev.js:10038:33)

Cannot read properties of undefined (reading '__untypedClient')

The above error occurred in the <TRPCProvider> component:

    at TRPCProvider (https://localhost:2013/coupons.dev.js:29544:17)
    at QueryProvider (https://localhost:2013/coupons.dev.js:10038:33)

Nick•7d ago

Hm @Alex / KATT 🐱 did we change anything which could affect this? I’m less familiar in this area

Alex / KATT 🐱•6d ago

we did something here to fix another inverse issue could you make an issue on github @wleistra ? think there's no need for a full reproduction, just insert the info from above

wleistraOP•6d ago

Ofcourse I can!

wleistraOP•6d ago

https://github.com/trpc/trpc/issues/6374

GitHub

Cannot read properties of undefined (reading '__untypedClient') on ...

Provide environment information Works on "@trpc/client": "11.0.0-rc.660", "@trpc/react-query": "11.0.0-rc.660", "@trpc/server": "11.0.0-rc.660...

Alex / KATT 🐱•6d ago

do you have a bigger stack trace than this? especially with sourcemap defined do you know which function that is used when this happens? did you update all of @trpc/* deps? are the version numbers matching across client/react-query etc?

wleistraOP•5d ago

yes all version numbers are the same as I do yarn upgrade-interactive on my workspace as it happens on the trpc.Provider which is high up on the hierarchy, i'm not sure what you mean with function... The code we have in place to create the client and props for the provider are the ones I added to the issue On Monday, when i return to work I will see if i can get you a better stack trace. Any tips or preferences on how the stack trace must be generated/copied/created If I'm the only one having this issue, is there something we do in our code snippets that makes this happen and that we can do another way to make it actually work?

Alex / KATT 🐱•5d ago

I believe it's a bug but I don't know what call triggered it I can't reproduce it in any of the example projects we have

wleistraOP•5d ago

I will try to dive deeper into it on Monday

Alex / KATT 🐱•5d ago

my best guess right now is that you have multiple @trpc/client installed across your monorepo and that they are not hoisted

wleistraOP•3d ago

I do have some package json files with the caret and the version and some without the caret... So I will check the yarn.lock file and put everything to the non caret version notation to ensure the same versions and let's see if that resolves it. I find it a bit strange though as all the trpc packages were updated to their latest versions so there should not be version mismatches Ok so removed all the carets and installed latest version rc.700 and checked the yarn lock file which shows a single version to be used throughout the whole workspace

"@trpc/client@npm:11.0.0-rc.700":
  version: 11.0.0-rc.700
  resolution: "@trpc/client@npm:11.0.0-rc.700"
  peerDependencies:
    "@trpc/server": 11.0.0-rc.700+e5c0c1a82
    typescript: ">=5.7.2"
  checksum: 10/cceab4f3cf8156d16b2a2c3c087408095aed7788d08962eb8fba357e4ad7fc68b9fb85a0a0d141412528ae57cf0556a566758bbdcbd8fe46e021d2c0e74238e2
  languageName: node
  linkType: hard

"@trpc/react-query@npm:11.0.0-rc.700":
  version: 11.0.0-rc.700
  resolution: "@trpc/react-query@npm:11.0.0-rc.700"
  peerDependencies:
    "@tanstack/react-query": ^5.62.8
    "@trpc/client": 11.0.0-rc.700+e5c0c1a82
    "@trpc/server": 11.0.0-rc.700+e5c0c1a82
    react: ">=18.2.0"
    react-dom: ">=18.2.0"
    typescript: ">=5.7.2"
  checksum: 10/4a9837c3556c3e3a4bdaf5d08b67b970ae368cb18f006d9ea10fc813d44e306fdec70a68bbc8abadd36f908655ffbcf3dbfb771d7b2a8522a23db3d0a64817e1
  languageName: node
  linkType: hard

"@trpc/server@npm:11.0.0-rc.700":
  version: 11.0.0-rc.700
  resolution: "@trpc/server@npm:11.0.0-rc.700"
  peerDependencies:
    typescript: ">=5.7.2"
  checksum: 10/0143db500ce5a3ec73b5572fd0889d9b0cd32e32ceb50a772ce4aa17864e4178c4bf7c8e14ff59baf5670de2ef1bfd30e49a0b1e0e9293223c7787607d853b16
  languageName: node
  linkType: hard

"@trpc/client@npm:11.0.0-rc.700":
  version: 11.0.0-rc.700
  resolution: "@trpc/client@npm:11.0.0-rc.700"
  peerDependencies:
    "@trpc/server": 11.0.0-rc.700+e5c0c1a82
    typescript: ">=5.7.2"
  checksum: 10/cceab4f3cf8156d16b2a2c3c087408095aed7788d08962eb8fba357e4ad7fc68b9fb85a0a0d141412528ae57cf0556a566758bbdcbd8fe46e021d2c0e74238e2
  languageName: node
  linkType: hard

"@trpc/react-query@npm:11.0.0-rc.700":
  version: 11.0.0-rc.700
  resolution: "@trpc/react-query@npm:11.0.0-rc.700"
  peerDependencies:
    "@tanstack/react-query": ^5.62.8
    "@trpc/client": 11.0.0-rc.700+e5c0c1a82
    "@trpc/server": 11.0.0-rc.700+e5c0c1a82
    react: ">=18.2.0"
    react-dom: ">=18.2.0"
    typescript: ">=5.7.2"
  checksum: 10/4a9837c3556c3e3a4bdaf5d08b67b970ae368cb18f006d9ea10fc813d44e306fdec70a68bbc8abadd36f908655ffbcf3dbfb771d7b2a8522a23db3d0a64817e1
  languageName: node
  linkType: hard

"@trpc/server@npm:11.0.0-rc.700":
  version: 11.0.0-rc.700
  resolution: "@trpc/server@npm:11.0.0-rc.700"
  peerDependencies:
    typescript: ">=5.7.2"
  checksum: 10/0143db500ce5a3ec73b5572fd0889d9b0cd32e32ceb50a772ce4aa17864e4178c4bf7c8e14ff59baf5670de2ef1bfd30e49a0b1e0e9293223c7787607d853b16
  languageName: node
  linkType: hard

After some digging i found out that trpc is initialized as undefined

import type { AppRouter } from '@/coupons-api';
import { createTRPCReact } from '@trpc/react-query';
import type { inferRouterOutputs } from '@trpc/server';

export type RouterOutputs = inferRouterOutputs<AppRouter>;

export const trpc = createTRPCReact<AppRouter>();

import type { AppRouter } from '@/coupons-api';
import { createTRPCReact } from '@trpc/react-query';
import type { inferRouterOutputs } from '@trpc/server';

export type RouterOutputs = inferRouterOutputs<AppRouter>;

export const trpc = createTRPCReact<AppRouter>();

results in Uncaught ReferenceError: trpc is not defined When trying to debug into the createTRPCReact function the hooks seem to be created (at least nothing suspicious there AFAIK) but proxx is resolved to

Proxy(Function) {length: 0, name: 'noop'}
[[Handler]] =
Object
[[IsRevoked]] =
false
[[Target]] =
()=>{\n// noop\n}

Proxy(Function) {length: 0, name: 'noop'}
[[Handler]] =
Object
[[IsRevoked]] =
false
[[Target]] =
()=>{\n// noop\n}

we use React 18.3.1 and typescript 5.7.3, build with webpack I guess my debug skills are not great, but for all i can see the createTRPCReact inner workings seem all broken when watching variables most of it is undefined. But then again, this is my first time trying to debug this deep 🙂 full stack trace as presented on console

zone.js:1188 Uncaught TypeError: Cannot read properties of undefined (reading '__untypedClient')
    at getUntypedClient (createTRPCClient.mjs:42:1)
    at TRPCProvider (createHooksInternal.mjs:30:1)
    at renderWithHooks (react-dom.development.js:15496:20)
    at mountIndeterminateComponent (react-dom.development.js:20113:15)
    at beginWork (react-dom.development.js:21636:18)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4151:16)
    at HTMLUnknownElement.sentryWrapped (helpers.js:93:1)
    at _ZoneDelegate.invokeTask (zone.js:402:1)
    at ZoneImpl.runTask (zone.js:159:1)
    at ZoneTask.invokeTask [as invoke] (zone.js:483:1)
    at invokeTask (zone.js:1138:1)
    at globalCallback (zone.js:1169:1)
    at HTMLUnknownElement.globalZoneAwareCallback (zone.js:1202:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4200:18)
    at invokeGuardedCallback (react-dom.development.js:4264:33)
    at beginWork$1 (react-dom.development.js:27500:9)
    at performUnitOfWork (react-dom.development.js:26609:14)
    at workLoopSync (react-dom.development.js:26515:7)
    at renderRootSync (react-dom.development.js:26483:9)
    at recoverFromConcurrentError (react-dom.development.js:25899:22)
    at performConcurrentWorkOnRoot (react-dom.development.js:25799:24)
    at workLoop (react.development.js:2653:36)
    at flushWork (react.development.js:2626:16)
    at MessagePort.performWorkUntilDeadline (react.development.js:2920:23)

zone.js:1188 Uncaught TypeError: Cannot read properties of undefined (reading '__untypedClient')
    at getUntypedClient (createTRPCClient.mjs:42:1)
    at TRPCProvider (createHooksInternal.mjs:30:1)
    at renderWithHooks (react-dom.development.js:15496:20)
    at mountIndeterminateComponent (react-dom.development.js:20113:15)
    at beginWork (react-dom.development.js:21636:18)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4151:16)
    at HTMLUnknownElement.sentryWrapped (helpers.js:93:1)
    at _ZoneDelegate.invokeTask (zone.js:402:1)
    at ZoneImpl.runTask (zone.js:159:1)
    at ZoneTask.invokeTask [as invoke] (zone.js:483:1)
    at invokeTask (zone.js:1138:1)
    at globalCallback (zone.js:1169:1)
    at HTMLUnknownElement.globalZoneAwareCallback (zone.js:1202:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4200:18)
    at invokeGuardedCallback (react-dom.development.js:4264:33)
    at beginWork$1 (react-dom.development.js:27500:9)
    at performUnitOfWork (react-dom.development.js:26609:14)
    at workLoopSync (react-dom.development.js:26515:7)
    at renderRootSync (react-dom.development.js:26483:9)
    at recoverFromConcurrentError (react-dom.development.js:25899:22)
    at performConcurrentWorkOnRoot (react-dom.development.js:25799:24)
    at workLoop (react.development.js:2653:36)
    at flushWork (react.development.js:2626:16)
    at MessagePort.performWorkUntilDeadline (react.development.js:2920:23)

Alex / KATT 🐱•3d ago

you're sure this is the culprit that causes the error? "trpc is not defined" is not the same as "Cannot read properties of undefined (reading '__untypedClient')"

wleistraOP•3d ago

it is currently my understanding that when watching the trpc exported from trpc.ts file it seems be undefined... But i do agree it is suspicious because you need to call the trpc.createClient() and it doesn't yell there =/ It could be undefined because it throws an uncaught exception and the error boundary is higher up so it unmounts it, causing it to be undefined... I guess I just have no idea how to check what is interesting for you.

Alex / KATT 🐱•23h ago

could you try with version 11.0.0-alpha-tmp-issues-6374.694 on all the trpc packages? did some random fumbling around in a PR that might or might not fix it lol very hard when i can't reproduce it

wleistraOP•11h ago

Will try it tomorrow first thing in the morning Unfortunately it still doesn't work on that version, but the error message has changed to

zone.js:1188 Uncaught TypeError: Cannot read properties of undefined (reading 'Symbol(TRPCClient)')
    at getUntypedClient (createTRPCClient.mjs:42:1)
    at TRPCProvider (createHooksInternal.mjs:30:1)
    at renderWithHooks (react-dom.development.js:15496:20)
    at mountIndeterminateComponent (react-dom.development.js:20113:15)
    at beginWork (react-dom.development.js:21636:18)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4151:16)
    at HTMLUnknownElement.sentryWrapped (helpers.js:93:1)
    at _ZoneDelegate.invokeTask (zone.js:402:1)
    at ZoneImpl.runTask (zone.js:159:1)
    at ZoneTask.invokeTask [as invoke] (zone.js:483:1)
    at invokeTask (zone.js:1138:1)
    at globalCallback (zone.js:1169:1)
    at HTMLUnknownElement.globalZoneAwareCallback (zone.js:1202:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4200:18)
    at invokeGuardedCallback (react-dom.development.js:4264:33)
    at beginWork$1 (react-dom.development.js:27500:9)
    at performUnitOfWork (react-dom.development.js:26609:14)
    at workLoopSync (react-dom.development.js:26515:7)
    at renderRootSync (react-dom.development.js:26483:9)
    at performConcurrentWorkOnRoot (react-dom.development.js:25787:76)
    at workLoop (react.development.js:2653:36)
    at flushWork (react.development.js:2626:16)
    at MessagePort.performWorkUntilDeadline (react.development.js:2920:23)

zone.js:1188 Uncaught TypeError: Cannot read properties of undefined (reading 'Symbol(TRPCClient)')
    at getUntypedClient (createTRPCClient.mjs:42:1)
    at TRPCProvider (createHooksInternal.mjs:30:1)
    at renderWithHooks (react-dom.development.js:15496:20)
    at mountIndeterminateComponent (react-dom.development.js:20113:15)
    at beginWork (react-dom.development.js:21636:18)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4151:16)
    at HTMLUnknownElement.sentryWrapped (helpers.js:93:1)
    at _ZoneDelegate.invokeTask (zone.js:402:1)
    at ZoneImpl.runTask (zone.js:159:1)
    at ZoneTask.invokeTask [as invoke] (zone.js:483:1)
    at invokeTask (zone.js:1138:1)
    at globalCallback (zone.js:1169:1)
    at HTMLUnknownElement.globalZoneAwareCallback (zone.js:1202:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4200:18)
    at invokeGuardedCallback (react-dom.development.js:4264:33)
    at beginWork$1 (react-dom.development.js:27500:9)
    at performUnitOfWork (react-dom.development.js:26609:14)
    at workLoopSync (react-dom.development.js:26515:7)
    at renderRootSync (react-dom.development.js:26483:9)
    at performConcurrentWorkOnRoot (react-dom.development.js:25787:76)
    at workLoop (react.development.js:2653:36)
    at flushWork (react.development.js:2626:16)
    at MessagePort.performWorkUntilDeadline (react.development.js:2920:23)

wleistraOP•11h ago

It truly seems that i don't get a client defined... maybe my screen recording will help you with some more info

Alex / KATT 🐱•7h ago

i am about 90% sure that you have duplicate installs of trpc then i think you have one package reading from e.g. /packages/backend/node_modules/@trpc/client and another reading from e.g. /apps/web/node_modules/@trpc/client whereas both should be reading from /node_modules/@trpc/client but we should fix it regardless i have some ideas, might send you another version to try later today could you try 11.0.0-alpha-tmp-issues-6374.697?

wleistraOP•6h ago

will do

Cannot read properties of undefined (reading '__internal_untypedClient')
TypeError: Cannot read properties of undefined (reading '__internal_untypedClient')
    at getUntypedClient (https://localhost:2013/freskanet-coupons.dev.js:26954:15)
    at TRPCProvider (https://localhost:2013/freskanet-coupons.dev.js:29553:187)
    at renderWithHooks (https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js:15496:20)
    at mountIndeterminateComponent (https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js:20113:15)
    at beginWork (https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js:21636:18)
    at HTMLUnknownElement.callCallback (https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js:4151:16)
    at HTMLUnknownElement.sentryWrapped (https://localhost:9000/freskanet-root-config.dev.js:66096:17)
    at _ZoneDelegate.invokeTask (https://localhost:9000/freskanet-root-config.dev.js:46245:33)
    at ZoneImpl.runTask (https://localhost:9000/freskanet-root-config.dev.js:46002:47)
    at ZoneTask.invokeTask [as invoke] (https://localhost:9000/freskanet-root-config.dev.js:46326:34)
    at invokeTask (https://localhost:9000/freskanet-root-config.dev.js:46981:18)
    at globalCallback (https://localhost:9000/freskanet-root-config.dev.js:47012:29)
    at HTMLUnknownElement.globalZoneAwareCallback (https://localhost:9000/freskanet-root-config.dev.js:47045:16)
    at Object.invokeGuardedCallbackDev (https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js:4200:18)
    ...

Cannot read properties of undefined (reading '__internal_untypedClient')
TypeError: Cannot read properties of undefined (reading '__internal_untypedClient')
    at getUntypedClient (https://localhost:2013/freskanet-coupons.dev.js:26954:15)
    at TRPCProvider (https://localhost:2013/freskanet-coupons.dev.js:29553:187)
    at renderWithHooks (https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js:15496:20)
    at mountIndeterminateComponent (https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js:20113:15)
    at beginWork (https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js:21636:18)
    at HTMLUnknownElement.callCallback (https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js:4151:16)
    at HTMLUnknownElement.sentryWrapped (https://localhost:9000/freskanet-root-config.dev.js:66096:17)
    at _ZoneDelegate.invokeTask (https://localhost:9000/freskanet-root-config.dev.js:46245:33)
    at ZoneImpl.runTask (https://localhost:9000/freskanet-root-config.dev.js:46002:47)
    at ZoneTask.invokeTask [as invoke] (https://localhost:9000/freskanet-root-config.dev.js:46326:34)
    at invokeTask (https://localhost:9000/freskanet-root-config.dev.js:46981:18)
    at globalCallback (https://localhost:9000/freskanet-root-config.dev.js:47012:29)
    at HTMLUnknownElement.globalZoneAwareCallback (https://localhost:9000/freskanet-root-config.dev.js:47045:16)
    at Object.invokeGuardedCallbackDev (https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js:4200:18)
    ...

i checked my monorepo. We use Yarn v4 btw, and there is only 1 node_modules folder in the whole repo and i did a search on "@trpc/react-query", "@trpc/client", and "@trpc/server". and all three have the same value 11.0.0-alpha-tmp-issues-6374.697 Also my yarn.lock file has no other resolutions or references to any other versions i found one difference but it has a caret so it shouldn't matter and it is on the API side

"trpc-to-openapi@npm:^2.1.2":
  version: 2.1.2
  resolution: "trpc-to-openapi@npm:2.1.2"
  dependencies:
    "@rollup/rollup-linux-x64-gnu": "npm:4.6.1"
    co-body: "npm:^6.1.0"
    h3: "npm:^1.6.4"
    openapi3-ts: "npm:4.4.0"
  peerDependencies:
    "@trpc/server": ^11.0.0-rc.648
    zod: ^3.23.8
    zod-openapi: ^4.1.0
  dependenciesMeta:
    "@rollup/rollup-linux-x64-gnu":
      optional: true
  checksum: 10/9800ea28d7dfd8283a29a9ad4341509a30a124c97901563d7f93dae0d98b50d539506629700ca0efc6fa5297e3c455dd6b57a8146e7dca478503880ccd8d5fc6
  languageName: node
  linkType: hard

"trpc-to-openapi@npm:^2.1.2":
  version: 2.1.2
  resolution: "trpc-to-openapi@npm:2.1.2"
  dependencies:
    "@rollup/rollup-linux-x64-gnu": "npm:4.6.1"
    co-body: "npm:^6.1.0"
    h3: "npm:^1.6.4"
    openapi3-ts: "npm:4.4.0"
  peerDependencies:
    "@trpc/server": ^11.0.0-rc.648
    zod: ^3.23.8
    zod-openapi: ^4.1.0
  dependenciesMeta:
    "@rollup/rollup-linux-x64-gnu":
      optional: true
  checksum: 10/9800ea28d7dfd8283a29a9ad4341509a30a124c97901563d7f93dae0d98b50d539506629700ca0efc6fa5297e3c455dd6b57a8146e7dca478503880ccd8d5fc6
  languageName: node
  linkType: hard

could this be the culprit? the exact version the error occurred first was 11.0.0-rc.677, the rc.666 version still worked

wleistraOP•6h ago

and from what I can tell is that the following line

const trpc = createTRPCReact<AppRouter>();

const trpc = createTRPCReact<AppRouter>();

returns like depicted on the attached image.

wleistraOP•6h ago

the console.loggin trpc.createClient returns

ƒ createTRPCClient(opts) {
    const client = new _internals_TRPCUntypedClient_mjs__WEBPACK_IMPORTED_MODULE_1__.TRPCUntypedClient(opts);
    const proxy = createTRPCClientProxy(client);
    return prox…

ƒ createTRPCClient(opts) {
    const client = new _internals_TRPCUntypedClient_mjs__WEBPACK_IMPORTED_MODULE_1__.TRPCUntypedClient(opts);
    const proxy = createTRPCClientProxy(client);
    return prox…

then console.logging the full createClient call as trpc.createClient({links}) returns

Proxy(Function) {length: 0, name: 'noop'}
[[Handler]]
: 
Object
[[Target]]
: 
()=>{ // noop }
[[IsRevoked]]
: 
false

Proxy(Function) {length: 0, name: 'noop'}
[[Handler]]
: 
Object
[[Target]]
: 
()=>{ // noop }
[[IsRevoked]]
: 
false

Cannot read __untypedClient from undefined error when try to update to latest 11.rc### versions

Did you find this page helpful?