, {\r\n\t\t\twrapper: Wrapper,\r\n\t\t});\r\n\t\tconst sendOtpForm = getByTestId(\"send-otp-form\");\r\n\r\n\t\t// await fetch(\"http://google.com\");\r\n\r\n\t\tawait waitFor(async () => {\r\n\t\t\tconst usernameField = getByPlaceholderText(\"Enter your email\");\r\n\t\t\tfireEvent.change(usernameField, { target: { value: \"test@yahoo.com\" } });\r\n\t\t\tfireEvent.submit(sendOtpForm); // this fires trpc.send_otp_procedure.mutate();\r\n\t\t});\r\n\r\n\t\t// expect(startTimerMock).toHaveBeenCalled();\r\n\t});\r\n});\r\n```\r\n\r\nMy `jest.setup.js` file:\r\n```javascript\r\nimport \"@testing-library/jest-dom\";\r\n\r\n// mocks fetch implementation\r\nimport \"whatwg-fetch\";\r\n```\n\n### Link to reproduction\n\nNA\n\n### To reproduce\n\nNA\n\n### Additional information\n\n_No response_\n\n### ๐จโ๐งโ๐ฆ Contributing\n\n- [ ] ๐โโ๏ธ Yes, I'd be down to file a PR fixing this bug!",[],4902,"closed","Msw not intercepting tRPC requests but working fine for normal react query calls (Jest + RTL)","2025-03-20T15:41:58Z","https://github.com/trpc/trpc/issues/4902",0.69982976,{"description":2986,"labels":2987,"number":2994,"owner":2945,"repository":2945,"state":2980,"title":2995,"updated_at":2973,"url":2996,"score":2997},"### Provide environment information\r\n\r\n System:\r\n OS: macOS 14.0\r\n CPU: (8) arm64 Apple M1\r\n Memory: 60.17 MB / 8.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node\r\n npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm\r\n pnpm: 8.6.1 - ~/Library/pnpm/pnpm\r\n Watchman: 2023.04.03.00 - /opt/homebrew/bin/watchman\r\n Browsers:\r\n Chrome: 118.0.5993.117\r\n Safari: 17.0\r\n npmPackages:\r\n @tanstack/react-query: ^4.18.0 => 4.18.0 \r\n @trpc/client: ^10.43.0 => 10.43.0 \r\n @trpc/next: ^10.43.0 => 10.43.0 \r\n @trpc/react-query: ^10.43.0 => 10.43.0 \r\n @trpc/server: ^10.43.0 => 10.43.0 \r\n next: 14.0.0 => 14.0.0 \r\n react: ^18.2.0 => 18.2.0 \r\n typescript: 4.9.4 => 4.9.4\r\n\r\n### Describe the bug\r\n\r\nGetting this error when I am deploying trpc with NextJS 14 version. The production server crashed due to below error when I am deploying it to production but when I am testing the flow on localhost it works fine and good.\r\n\r\nAlso when I degraded the Nextjs version to 13.4.8 it works again but when I upgrade it to 14 version then getting below error on vercel deployment.\r\n\r\n โจฏ file:///var/task/node_modules/.pnpm/@trpc+react-query@10.43.0_@tanstack+react-query@4.18.0_@trpc+client@10.43.0_@trpc+server@10.4_xyoezmo6ballumn6zskppfxdhe/node_modules/@trpc/react-query/dist/createHooksInternal-bdff7171.mjs:5\r\nimport React, { createContext, useRef, useState, useEffect, useCallback, useMemo } from 'react';\r\n ^^^^^^^^^^^^^\r\nSyntaxError: Named export 'createContext' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.\r\nCommonJS modules can always be imported via the default export, for example using:\r\n\r\nimport pkg from 'react';\r\nconst { createContext, useRef, useState, useEffect, useCallback, useMemo } = pkg;\r\n\r\n at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)\r\n at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) {\r\n page: '/'\r\n}\r\n โจฏ file:///var/task/node_modules/.pnpm/@trpc+react-query@10.43.0_@tanstack+react-query@4.18.0_@trpc+client@10.43.0_@trpc+server@10.4_xyoezmo6ballumn6zskppfxdhe/node_modules/@trpc/react-query/dist/createHooksInternal-bdff7171.mjs:5\r\nimport React, { createContext, useRef, useState, useEffect, useCallback, useMemo } from 'react';\r\n ^^^^^^^^^^^^^\r\nSyntaxError: Named export 'createContext' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.\r\nCommonJS modules can always be imported via the default export, for example using:\r\n\r\nimport pkg from 'react';\r\nconst { createContext, useRef, useState, useEffect, useCallback, useMemo } = pkg;\r\n\r\n at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)\r\n at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) {\r\n page: '/'\r\n}\r\nfile:///var/task/node_modules/.pnpm/@trpc+react-query@10.43.0_@tanstack+react-query@4.18.0_@trpc+client@10.43.0_@trpc+server@10.4_xyoezmo6ballumn6zskppfxdhe/node_modules/@trpc/react-query/dist/createHooksInternal-bdff7171.mjs:5\r\nimport React, { createContext, useRef, useState, useEffect, useCallback, useMemo } from 'react';\r\n ^^^^^^^^^^^^^\r\nSyntaxError: Named export 'createContext' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.\r\nCommonJS modules can always be imported via the default export, for example using:\r\n\r\nimport pkg from 'react';\r\nconst { createContext, useRef, useState, useEffect, useCallback, useMemo } = pkg;\r\n\r\n at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)\r\n at async ModuleJob.run (node:internal/modules/esm/module_job:190:5) {\r\n page: '/'\r\n}\r\nError: Runtime exited without providing a reason\r\nRuntime.ExitError\r\n\r\n\r\n### Link to reproduction\r\n\r\nNot have the link\r\n\r\n### To reproduce\r\n\r\nNot any idea why it is happening.\r\n\r\n### Additional information\r\n\r\n_No response_\r\n\r\n### ๐จโ๐งโ๐ฆ Contributing\r\n\r\n- [ ] ๐โโ๏ธ Yes, I'd be down to file a PR fixing this bug!",[2988,2991],{"name":2989,"color":2990},"โฎ needs reproduction","000055",{"name":2992,"color":2993},"๐ bug: unconfirmed","e99695",4982,"bug/(feat?): make trpc work with Next 14","https://github.com/trpc/trpc/issues/4982",0.7088083,{"description":2999,"labels":3000,"number":3001,"owner":2945,"repository":2945,"state":2980,"title":3002,"updated_at":3003,"url":3004,"score":3005},"### Describe the feature you'd like to request\r\n\r\nFollowing #3482 & coming over from https://github.com/typescript-eslint/typescript-eslint/issues/6760: typescript-eslint is soon going to release a new v6 major version with reworked configurations. You can read up on it here: [typescript-eslint.io/blog/announcing-typescript-eslint-v6-beta](https://typescript-eslint.io/blog/announcing-typescript-eslint-v6-beta)\r\n\r\nSpecifically, the [configurations are reworked](https://typescript-eslint.io/blog/announcing-typescript-eslint-v6-beta#reworked-configuration-names) so that the recommended equivalents to what trpc uses now are:\r\n\r\n* `'plugin:@typescript-eslint/recommended-type-checked'`\r\n* `'plugin:@typescript-eslint/stylistic-type-checked'`\r\n\r\n### Describe the solution you'd like to see\r\n\r\nI can send a PR updating to them!\r\n\r\n### Describe alternate solutions\r\n\r\nI suppose trpc could stay on typescript-eslint@v5, or use its own bespoke lint configs... neither option seems very appealing to me. ๐ \r\n\r\n### Additional information\r\n\r\n_No response_\r\n\r\n### ๐จโ๐งโ๐ฆ Contributing\r\n\r\n- [X] ๐โโ๏ธ Yes, I'd be down to file a PR implementing this feature!",[],4540,"feat: Use typescript-eslint@v6 & its reworked configs","2025-03-20T15:41:45Z","https://github.com/trpc/trpc/issues/4540",0.7088486,{"description":3007,"labels":3008,"number":3012,"owner":2945,"repository":2945,"state":2980,"title":3013,"updated_at":3014,"url":3015,"score":3016},"### Describe the feature you'd like to request\r\n\r\nThe last couple of days I have been experimenting with the new Next app directory, in combination with server actions. I want to suggest a new part of TRPC ecosystem to fully embrace next 13.4 and the big changes react 18 brought. \r\n\r\nI don't have a precise clue how TRPC wants to implement next 13.4 and what the ideas are around server actions and server components. So maybe the below solution is redundant.\r\n\r\n### Describe the solution you'd like to see\r\n\r\nI would like to suggest the following API added to `@trpc/nextjs` and maybe even as a standalone package.\r\n\r\n\r\n```ts\r\nimport { createServerHandlers } from `@trpc/nextjs`;\r\nconst f = createServerHandlers();\r\n\r\nexport const protectedProcedure = f.use(authMiddleware). // authMiddleware is an example middleware, like how TRPC handles middleware\r\n\r\n```\r\n\r\n## server actions\r\nThe new api should allow the following idea in the example component snippet: \r\n```ts\r\nimport { protectedProcedure } from \"@/utils/trpc\";\r\nimport { cookies } from 'next/headers';\r\n\r\n// createOrder is now an exportable, validated server action and can be used as form action\r\nexport const createOrder = protectedProcedure.input(z.object({ product_id: z.number() })).action(async ({ctx,input}) => {\r\n\"use server\";\r\n// createOrder..\r\n});\r\n\r\n \r\nexport default function CreateOrder({ productId }) {\r\n return (\r\n \u003Cform action={createOrder}>\r\n \u003Cbutton type=\"submit\">Create order\u003C/button>\r\n \u003C/form>\r\n );\r\n```\r\n\r\n## server components \r\nFor server components I would like to suggest the same kind of idea:\r\n```ts\r\nconst getUserOrders = protectedProcedure.query(async ({ ctx }) => {\r\n return await prisma.orders.findMany({ \r\n where : {\r\n user_id: ctx.user.id\r\n }\r\n);\r\n})\r\n\r\nexport default async function UserOrdersPage() {\r\n const orders = await getUserOrders();\r\n\r\n return \u003COrdersTable orders={orders} />\r\n}\r\n\r\n```\r\n\r\n## Advantages\r\n- the action and server component query function could be exported and reused in other components\r\n- The nicest part would that the function maybe integrated to the trpc router at some point: \r\n```ts\r\n// example with the previous defined functions\r\nexport const ordersRouter = t.router({\r\ncreateOrder: t.procedure.implement(createOrder),\r\ngetUserOrders: t.procedure.implement(getUserOrders) \r\n })\r\n\r\n// note: implement is here a magic method that knows to add it correcly to the router. \r\n// the specifics of this implement function are left-aside, but I think it should be possible\r\n```\r\n\r\n\r\n\r\n### Describe alternate solutions\r\n\r\nother possible libaries: \r\n- https://github.com/pingdotgg/zact\r\n- https://github.com/TheEdoRan/next-safe-action\r\n\r\nHowever, I think TRPC could be the best solution (if it integrates with the app router)\r\n\r\n### Additional information\r\n\r\nI would really like to see suggestions or other enhancements and become aware of what the plans are with TRPC in the context of next 13.4!\r\n\r\n### ๐จโ๐งโ๐ฆ Contributing\r\n\r\n- [ ] ๐โโ๏ธ Yes, I'd be down to file a PR implementing this feature!",[3009],{"name":3010,"color":3011},"duplicate","cfd3d7",4431,"feat: React Server Components & Server Actions ","2023-05-26T20:18:23Z","https://github.com/trpc/trpc/issues/4431",0.71238047,{"description":3018,"labels":3019,"number":3023,"owner":2945,"repository":2945,"state":2980,"title":3024,"updated_at":3025,"url":3026,"score":3027},"### Provide environment information\n\n ```\r\n npmPackages:\r\n @trpc/client: ^10.45.1 => 10.45.1\r\n @trpc/server: ^10.45.1 => 10.45.1\r\n typescript: ^5.3.3 => 5.3.3\r\n```\n\n### Describe the bug\n\nI want to use `@trpc/client` to make calls to the backend and noticed that `process.env` is not an error according to TypeScript.\n\n### Link to reproduction\n\nhttps://stackblitz.com/edit/github-bu2owm?file=tsconfig.json,index.ts\n\n### To reproduce\n\nImport the `@trpc/client` package, see reproduction link.\n\n### Additional information\n\nThere are several references to `NodeJS.ReadableStream` in the code. Maybe they should be rewritten in the style it has been done for `fetch` (see `FetchEsque` etc.) but I'm not certain this is the real cause.\n\n### ๐จโ๐งโ๐ฆ Contributing\n\n- [ ] ๐โโ๏ธ Yes, I'd be down to file a PR fixing this bug!",[3020],{"name":3021,"color":3022},"๐ bug","d73a4a",5557,"bug: importing from `@trpc/client` pulls in `@types/node`","2025-03-20T15:42:18Z","https://github.com/trpc/trpc/issues/5557",0.71622914,{"description":3029,"labels":3030,"number":3034,"owner":2945,"repository":2945,"state":2980,"title":3035,"updated_at":3036,"url":3037,"score":3038},"### Provide environment information\n\n```\r\n System:\r\n OS: macOS 14.5\r\n CPU: (10) arm64 Apple M1 Max\r\n Memory: 4.26 GB / 32.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 20.5.1 - ~/.nvm/versions/node/v20.5.1/bin/node\r\n npm: 9.8.0 - ~/.nvm/versions/node/v20.5.1/bin/npm\r\n bun: 1.0.25 - /opt/homebrew/bin/bun\r\n Browsers:\r\n Chrome: 126.0.6478.61\r\n Edge: 126.0.2592.56\r\n Safari: 17.5\r\n npmPackages:\r\n @tanstack/react-query: ^5.39.0 => 5.45.0\r\n @trpc/client: next => 11.0.0-rc.403+ab71a1be6\r\n @trpc/react-query: next => 11.0.0-rc.403+ab71a1be6\r\n @trpc/server: next => 11.0.0-rc.403+ab71a1be6\r\n next: ^14.2.1 => 14.2.4\r\n react: ^18.3.0 => 18.3.1\r\n typescript: ^5.4.2 => 5.4.5\r\n```\n\n### Describe the bug\n\nThe type of `createTRPCQueryUtils({ queryClient, client }).anyRouter.anyMutationProcedure` is always `never`.\r\n\r\nIf this is intentional, I believe it's not ideal, because there are some `queryClient` methods that can be useful for mutations, such as [queryClient.setMutationDefaults](https://tanstack.com/query/v5/docs/reference/QueryClient/#queryclientsetmutationdefaults), which is crucial for implementing proper offline mutation persistence (see https://github.com/trpc/trpc/discussions/5797)\n\n### Link to reproduction\n\nhttps://github.com/simonecervini/trpc-issue-mutations-create_trpc_query_utils\n\n### To reproduce\n\nOpen `/src/app/page.tsx` and check the types of `ThisIsCorrectlyTyped` and `ThisIsNotCorrectlyTyped`\n\n### Additional information\n\nProbably related: https://discord-questions.trpc.io/m/1236883887871754260\n\n### ๐จโ๐งโ๐ฆ Contributing\n\n- [X] ๐โโ๏ธ Yes, I'd be down to file a PR fixing this bug!",[3031],{"name":3032,"color":3033},"@trpc/react-query","375E6E",5800,"feat(react-query): `createTRPCQueryUtils` should support mutations","2025-03-20T15:42:27Z","https://github.com/trpc/trpc/issues/5800",0.720516,["Reactive",3040],{},["Set"],["ShallowReactive",3043],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fdrBaPG59KMHmNtA0GAJTvaEQYooc_Byg5fJnkIl-ElQ":-1},"/trpc/trpc/5264"]