[v10] bug: TypeScript not willing to serialize the type of my client
Problem
Provide environment information System: OS: macOS 12.5 CPU: (10) arm64 Apple M1 Pro Memory: 152.64 MB / 32.00 GB Shell: 5.8.1 - /bin/zsh Binaries: Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v16.16.0/bin/yarn npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm Browsers: Chrome: 104.0.5112.101 Safari: 15.6 Describe the bug I am seeing an error in my editor saying: `The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed.` on my `setupTRPC` for my Next.js project. This is coming after a migration from v9 to v10 where I was hoping to see this problem resolve. However, it seems to have moved from my root router to the `setupTRPC`. This leads me to believe that the type annotation is getting too long for the TS interpreter in VSCode so it's punting the effort/complaining. However, I'll let the real TS genies figure it out. 😄 To reproduce Providing a minimal reproduction might not be applicable here? This bug occurs because of lots of code, not little code. 😄 Rather, here is a link to my source code. You'll find the TS error on this line. Removing these two falsy declaration values from tsconfig will reveal the error! Additional information _No response_ 👨👧👦 Contributing - [ ] 🙋♂️ Yes, I'd be down to file a PR fixing this bug!
Error Output
error in my editor saying: `The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed.` on my `setupTRPC` for my Next.js project.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Add Explicit Type Annotations to setupTRPC
The TypeScript compiler has a limit on the length of inferred types it can serialize. When migrating from v9 to v10 of TRPC, the complexity of the types involved in the setupTRPC function has likely increased, leading to this error. This typically occurs when TypeScript attempts to infer a type that is too complex or lengthy, necessitating explicit type annotations to simplify the type structure.
Awaiting Verification
Be the first to verify this fix
- 1
Identify the setupTRPC Function
Locate the setupTRPC function in your codebase where the TypeScript error is being reported. This is typically found in your API or router files.
typescript// Example function definition const trpc = setupTRPC(); - 2
Add Explicit Type Annotations
Modify the setupTRPC function call to include explicit type annotations. This will help the TypeScript compiler understand the expected structure and reduce the complexity of the inferred type.
typescriptconst trpc: TRPCType = setupTRPC(); // Replace TRPCType with the actual type you expect - 3
Refactor Complex Types
If the types being passed to setupTRPC are complex, consider refactoring them into simpler, reusable types or interfaces. This can help reduce the overall length of the inferred type.
typescriptinterface MyRouter { // Define your router structure here } const myRouter: MyRouter = { /* implementation */ }; - 4
Test the Changes
Run your TypeScript compiler or your Next.js application to ensure that the error no longer appears. Check for any other related TypeScript errors that may arise from the changes.
bashnpm run dev - 5
Review and Document Changes
After confirming that the error is resolved, review the changes made to ensure they align with your project's coding standards. Document any new types or interfaces created for future reference.
markdown// Documentation for new types/interfaces
Validation
Confirm that the TypeScript error regarding the inferred type no longer appears in your editor. Additionally, ensure that your application compiles and runs without issues.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep