While using the t3-stack (Next, tRPC, Prisma, Next-auth, Typescript)
tRPC encountered an error on undefined: TRPCError: Converting circular structure to JSON
--> starting at object with constructor 'RequestHandler'
| property 'client' -> object with constructor 'PrismaClient'
--- property '_fetcher' closes the circle
Check out the repository here: https://github.com/gabrielforster/my-portfolio (develop branch)
Encountered a similar issue, but I found that the problem was because I forgot to destructure my input value. It seems like the serialization process includes the entire context, such as PrismaClient.
By changing:
.query(async (input) => {
to:
.query(async ({ input }) => {
I was able to resolve the problem.
dataQuery: publicProcedure
.input(QueryInputValidator)
.output(QueryOutputValidator)
.query(async ({ input }) => {
return requestBackendEnv<QueryOutput>({
url: "query/",
method: "POST",
body: input,
});
}),
Here lies the code for my component file. My goal is to develop a reusable modal component using ng-bootstrap's modal feature. However, upon trying to import the following component from the shared module, I encounter a static injector error. Despite ...
I need to output elements from an array of strings starting at index 1. arr = [ "str1", "str2", "str3", "str4", "str5" ] The desired output is: str2 str3 str4 str5 To achieve this, use a new @for loop in ...
Workaround presented below. I am attempting to send props down to a child component using {children}. The Parent component: const ParentComp = ({ children, propsToSendToChild }) => ( <div>Dynamic component content: {children} &l ...
Despite scouring numerous StackOverflow questions, I haven't been able to find a solution that fits my specific issue. It seems like there might be a CSS attribute preventing the div from centering properly. Could utilizing flexbox help resolve this? ...
Whenever I attempt to execute yarn ios, the following error message appears: An issue arose with the element type, as it is invalid. The expected input should be a string for built-in components or a class/function for composite components, yet it receive ...
Trying to migrate my TypeScript React app to use react-router-dom version v6, but facing challenges. The official react-router-dom documentation mentions: When upgrading to v5.1, it's advised to replace all instances of withRouter with hooks. Howe ...
Utilizing the antd alert component (ts) with styled components import styled from 'styled-components'; import Alert from 'antd/es/alert'; export const SAlert = styled(Alert)` && { margin-bottom: 24px; border-radiu ...
Consider a scenario where there is a function with multiple optional parameters. Why does the function's arity not have a type guard based on the arguments keyword and what are some solutions that do not require altering the implementation or resorti ...
Is there a special method to choose multiple tags on the same level with the same tag? <div #el></div> <div #el></div> <div #el></div> I keep getting an error message that says "Reference "#el" is defined several times ...
I have a Node.js service written in TypeScript. I am currently working on implementing a separate routing layer within the application. In my app.js file, I have the following code: let IndividualRoute= require('./routing/IndividualRoute'); app ...
I'm currently working on a Discord bot using modals in Discord.js v14. These modals appear after the user clicks a button, and an .awaitModalSubmit() collector is triggered to handle one modal submission interaction by applying certain logic. The .awa ...
In creating a custom Angular Material module, I have created a material.module.ts file and imported various Angular Material UI components as shown below: import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/commo ...
I'm currently working on creating a library to collect and distribute a series of Angular components across various projects, with a dependency on angular/material2. My objective is to eventually publish it on npm. However, I've encountered an i ...
I am struggling with my Angular 1.5 app that uses Typescript. Here is a snippet of my code: mymodule.module.ts: angular.module('mymodule', []).component('mycomponent', new MyComponent()); mycomponent.component.ts export class MyCont ...
Is there a method to simulate localStorage using Jest? Despite trying various solutions from this post, none have proven effective in TypeScript as I continue encountering: "ReferenceError: localStorage is not defined" I attempted creating my ...
Currently in the process of migrating from react-router-dom v5 to v6. // Original code using react-router-dom v5 <Route exact path="/" component={router.Home} /> // Updated code for react-router-dom v6 <Route path="/*" element ...
Take a look at this straightforward Next.js application: https://codesandbox.io/p/sandbox/next-js-app-router-1bvd7d?file=README.md Here is an API route (/api/hello): export default function handler(req, res) { res.status(204).end(); } And there's ...
In my code, I am working with an array object structured as follows: let myArray=[ { "id":"100", "child1":[ {"id":"xx","Array":[]}, {"id":"yy","Array":[]}, {"id":"zz","Array":[]} ] }, { "id":"200", "child1":[ {"id":"xx","Array ...
I have an object structured as follows: NewObjName: Object { OLDCOLUMNNAME1: "NEWCOLUMN_NAME1", OLDCOLUMNNAME2: "NEWCOLUMN_NAME2", OLDCOLUMNNAME3: "NEWCOLUMN_NAME3"} Next, there is an array containing objects in this format: ...
One of the initial properties of the motion component is: <motion.div initial={{ x: "100%" }} animate={{ x: "calc(100vw - 50%)" }} /> When using useAnimate with the useInView hook: const [scope, animate] = useAnimate(); const ...