tRPC not working ion Next.js app

[pmould]

EDIT: This issue was a PEBKAC due to an issue with my chrome browser.

tRPC requests are not working when running the next.js app but are working on the expo app.

On web the trpc.hello.world.useQuery<string>('world') call is returning undefined on the 'Data Fetching' page and there are no TRPC request being logged in the browser network tab so it seems it may be a client-side issue.

Steps to reproduce:

• Install t4-app
  • bun create t4-app
• Rename .env.example to .env.local

• Update .env.local file setting the values for the following env variables:

  • PUBLIC_SUPABASE_ANON_KEY
  • PUBLIC_SUPABASE_URL
  • PUBLIC_SUPPORT_EMAIL
  • bun install
  • Run the api server : bun api
  • In a different terminal start the Next.js app: bun web
  • In the browser go to http://localhost:3000/data-fetching
  • Open up the Network tab
  • Refresh the page
  • Notice that no trpc batch request are made
  • Put a breakpoint on this file in Source tab: packages/app/features/data-fetching/screen.tsx on Line 9 after const helloWorld = trpc.hello.world.useQuery<string>('world')
  • Notice that helloWorld is undefined instead of the useQuery return object of {data: ..., isLoading: ..., isFetched,...}

  Run app on mobile and notice that Hello World is returned from the api on the Data Fetching Page

  Notice that the trpc client object is set differently than for mobile at packages/app/utils/trpc/index.web.ts.

  I have been trying to investigate the issue with the related next.js changes that have been made recently.

  FYI.. I have been using the t4-stack with trpc working for web for a while now but only bringing my stack update to date recently with the latest changes in the stack that were made in the past 2 months.

  Not sure if it's due to upgrading to Next.js 14 or not?

[johmsalas]

I'm facing this issue, did you find a solution @pmould?