alan Posts - Answer Overflow

Topics

alan

Explore posts from servers

DDeno TTCTheo's Typesafe Cult DTDrizzle Team MModular

TTCTheo's Typesafe Cult

•Created by alan on 7/27/2024 in #questions

recommended pattern for sharing data from same api across multiple client components using approuter

after reading https://nextjs.org/docs/app/building-your-application/data-fetching/patterns and https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#sharing-data-between-components, I feel like I'm seeing two contradictory recommendations. I initially would fetch data from a server component that would pass down the data two its two child client components and found that the json data, even though parsed in the server component shows up in the client components as strings, which means that I'd have to parse it yet again in the client components. then I see that it might be discouraged to follow this pattern according to the second link and instead use nextjs's fetch, which may lead to something like this

useEffect(() => {
   fetch('http://api.example.com/api/foo').then(data => data.json()).then(parsed => setData(parsed))
}, []);

useEffect(() => {
   fetch('http://api.example.com/api/foo').then(data => data.json()).then(parsed => setData(parsed))
}, []);

in both client components that would use that same data since it would be cached. which pattern is actually recommended here?

3 replies

•Created by alan on 7/8/2024 in #help

getting used in key specification without a key length error when referencing text type column

how would I resolve this when using with mysql2? Thank you

1 replies

TTCTheo's Typesafe Cult

•Created by alan on 7/3/2024 in #questions

Is anyone else having issues with cloning skateshop

https://github.com/sadmann7/skateshop has been mentioned a couple times here. I was able to barely clone it after it had been stuck at 9% and now I'm getting a module cannot be found typescript error for all non nextjs-related modules.

2 replies

TTCTheo's Typesafe Cult

•Created by alan on 3/31/2024 in #questions

how to use yarnrc.yml

I found this

nodeLinker: node-modules

plugins:
  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
    spec: "@yarnpkg/plugin-workspace-tools"
  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
    spec: "@yarnpkg/plugin-interactive-tools"

yarnPath: .yarn/releases/yarn-berry.cjs

nodeLinker: node-modules

plugins:
  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
    spec: "@yarnpkg/plugin-workspace-tools"
  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
    spec: "@yarnpkg/plugin-interactive-tools"

yarnPath: .yarn/releases/yarn-berry.cjs

in a yarnrc.yml and the current locally installed version of yarn-berry seems to be broken. I'm unfamiliar with this tooling and was wondering how I'd go about updating the version of yarn and the plugins. Is this something I can do with the CLI?

3 replies

TTCTheo's Typesafe Cult

•Created by alan on 3/28/2024 in #questions

can anyone recommend a library to use mutating operations but return new unmutated objects?

the best I can think of is immutable.js but I was wondering if anything better is available. I'd rather use push and splice instead of using object spread operators for deeply nested objects. thanks!

4 replies

TTCTheo's Typesafe Cult

•Created by alan on 3/23/2024 in #questions

how to get better-sqlite3 to work in docker

hello. I'm getting this error when trying to run a t3 app with better-sqlite3, which I'm using with lucia auth to run and I tried using a newer node alpine image (18 and 21). The error is very similar to the one reported here https://github.com/TryGhost/node-sqlite3/issues/1581

Error: Error relocating /app/node_modules/better-sqlite3/build/Release/better_sqlite3.node: fcntl64: symbol not found

Error: Error relocating /app/node_modules/better-sqlite3/build/Release/better_sqlite3.node: fcntl64: symbol not found

any help would be appreciated.

12 replies

TTCTheo's Typesafe Cult

•Created by alan on 3/18/2024 in #questions

Nextjs in standalone mode with Auth.js(v5) returns JWTSessionError

hello. I'm getting this error:

2024-03-17 18:39:53 [auth][error] JWTSessionError: Read more at https://errors.authjs.dev#jwtsessionerror
2024-03-17 18:39:53 [auth][cause]: Error: no matching decryption secret
2024-03-17 18:39:53     at tI.clockTolerance (/app/.next/server/chunks/696.js:17:58648)
2024-03-17 18:39:53     at t_ (/app/.next/server/chunks/696.js:17:44016)
2024-03-17 18:39:53     at tk (/app/.next/server/chunks/696.js:17:45092)
2024-03-17 18:39:53     at tI (/app/.next/server/chunks/696.js:17:53016)
2024-03-17 18:39:53     at Object.tz [as decode] (/app/.next/server/chunks/696.js:17:58494)
2024-03-17 18:39:53     at iI (/app/.next/server/chunks/696.js:373:39347)
2024-03-17 18:39:53     at iW (/app/.next/server/chunks/696.js:373:45483)
2024-03-17 18:39:53     at async iq (/app/.next/server/chunks/696.js:373:49700)
2024-03-17 18:39:53     at async a (/app/.next/server/app/signin/page.js:1:4483)

2024-03-17 18:39:53 [auth][error] JWTSessionError: Read more at https://errors.authjs.dev#jwtsessionerror
2024-03-17 18:39:53 [auth][cause]: Error: no matching decryption secret
2024-03-17 18:39:53     at tI.clockTolerance (/app/.next/server/chunks/696.js:17:58648)
2024-03-17 18:39:53     at t_ (/app/.next/server/chunks/696.js:17:44016)
2024-03-17 18:39:53     at tk (/app/.next/server/chunks/696.js:17:45092)
2024-03-17 18:39:53     at tI (/app/.next/server/chunks/696.js:17:53016)
2024-03-17 18:39:53     at Object.tz [as decode] (/app/.next/server/chunks/696.js:17:58494)
2024-03-17 18:39:53     at iI (/app/.next/server/chunks/696.js:373:39347)
2024-03-17 18:39:53     at iW (/app/.next/server/chunks/696.js:373:45483)
2024-03-17 18:39:53     at async iq (/app/.next/server/chunks/696.js:373:49700)
2024-03-17 18:39:53     at async a (/app/.next/server/app/signin/page.js:1:4483)

and was wondering how I can resolve this. I found this related thread https://github.com/nextauthjs/next-auth/discussions/6030 which suggests to

Check web server logs and tweak the config for proxy-body-size, proxy-buffer-size, fastcgi-buffer-size etc, in the case of Nginx and see if it helps.

Check web server logs and tweak the config for proxy-body-size, proxy-buffer-size, fastcgi-buffer-size etc, in the case of Nginx and see if it helps.

but I don't use nginx and am just running the nextjs app in standalone mode. thanks

2 replies

TTCTheo's Typesafe Cult

•Created by alan on 3/17/2024 in #questions

How to fix next auth beta redirecting to undefined path

hello. I'm trying to work with next auth beta and it's redirecting me to localhost:3000/undefined after signing in and I was wondering how to fix this such that I get redirected either to /signin or /. Thank you.

22 replies

•Created by alan on 2/3/2024 in #questions

how to use the python unittest library in mojo

tsia

2 replies

TTCTheo's Typesafe Cult

•Created by alan on 10/29/2023 in #questions

.env.local values undefined in vercel serverless endpoints

I have a few vercel serverless golang functions that I would like to use and I have a .env.local. but it's not recognized in the functions, although it's recognized in my nextjs project. how do I fix this when running vercel dev?

2 replies

TTCTheo's Typesafe Cult

•Created by alan on 10/22/2023 in #questions

accessing route handler issues 404 error

I have this route handler at src/app/api/foo/route.ts:

export async function GET(_request: Request) {
  return Response.json({ sup: "yo" });
}

export async function GET(_request: Request) {
  return Response.json({ sup: "yo" });
}

but going to http://localhost:3000/api/foo issues this error:

404: NOT_FOUND
Code: NOT_FOUND
ID: dev1::1q4p8-1697936493642-3afd6458a45a

404: NOT_FOUND
Code: NOT_FOUND
ID: dev1::1q4p8-1697936493642-3afd6458a45a

when running vercel dev, which I need to run for accessing some api endpoints using golang serverless functions, but it works just fine when I run npm run dev. how to fix this?

2 replies

TTCTheo's Typesafe Cult

•Created by alan on 10/21/2023 in #questions

how to resolve hydration failed error when including button shadcn dialog

I have this dialog built out of shadcn's components:

import { Button } from "./ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "./ui/dialog";

export default function CreateThingDialog() {
  return (
    <Dialog>
      <DialogTrigger>
        <Button variant="outline">Create thing</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you sure absolutely sure?</DialogTitle>
          <DialogDescription>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our servers.
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
}

import { Button } from "./ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "./ui/dialog";

export default function CreateThingDialog() {
  return (
    <Dialog>
      <DialogTrigger>
        <Button variant="outline">Create thing</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you sure absolutely sure?</DialogTitle>
          <DialogDescription>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our servers.
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
}

which is giving me this error:

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <button> in <button>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
button
_c
./src/components/ui/button.tsx (40:11)
button
eval
./node_modules/@radix-ui/react-primitive/dist/index.mjs (44:26)
eval
./node_modules/@radix-ui/react-dialog/dist/index.mjs (109:28)
Provider
./node_modules/@radix-ui/react-context/dist/index.mjs (47:28)
$5d3850c4d0b4e6c7$export$3ddf2d174ce01153
./node_modules/@radix-ui/react-dialog/dist/index.mjs (77:28)
CreateThingDialog
ThingsClient
./src/app/matters/things-client-component.tsx (22:89)

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <button> in <button>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
button
_c
./src/components/ui/button.tsx (40:11)
button
eval
./node_modules/@radix-ui/react-primitive/dist/index.mjs (44:26)
eval
./node_modules/@radix-ui/react-dialog/dist/index.mjs (109:28)
Provider
./node_modules/@radix-ui/react-context/dist/index.mjs (47:28)
$5d3850c4d0b4e6c7$export$3ddf2d174ce01153
./node_modules/@radix-ui/react-dialog/dist/index.mjs (77:28)
CreateThingDialog
ThingsClient
./src/app/matters/things-client-component.tsx (22:89)

but goes away when I remove the Button component. wai?! thanks!

17 replies

TTCTheo's Typesafe Cult

•Created by alan on 10/18/2023 in #questions

how to include text snippets in responses from google drive api full text search

TSIA

2 replies

TTCTheo's Typesafe Cult

•Created by alan on 10/15/2023 in #questions

how to get conditional tailwind classes to work

I have this

    <div className={`w-[${isOpen ? "300px" : "60px"}]`}>

    <div className={`w-[${isOpen ? "300px" : "60px"}]`}>

and see in devtools resolving to w-[300px] for example, but width is not defined. however, if I remove the conditional logic and just set

<div className={`w-[300px]`}>

<div className={`w-[300px]`}>

it works as expected. how do I re-enable the conditional logic without breaking it?

8 replies

TTCTheo's Typesafe Cult

•Created by alan on 7/30/2023 in #questions

typewriter effect react library

can anyone recommend a react library like this https://github.com/tameemsafi/typewriterjs that has an auto typewriting effect, except that it would change the value of an input element instead of the text content of an element? the vanilla js version seems to support what I'm describing but not the react component

2 replies

TTCTheo's Typesafe Cult

•Created by alan on 7/21/2023 in #questions

react-icons or one of the underlying libraries?

do people care about stylistic consistency and stick to one icon library or just pick and choose from react-icons?

3 replies

TTCTheo's Typesafe Cult

•Created by alan on 7/1/2023 in #questions

is infinite scroll with comments only possible with graphql?

that is, in nextjs with the app router, using nodes and edges.

2 replies

TTCTheo's Typesafe Cult

•Created by alan on 6/29/2023 in #questions

using zact with react-hook-form issues error

hello. when I try to call a server action wrapped in zact like so, I am getting this error: - error ReferenceError: Cannot access 'callMyServerAction' before initialization. This only seems to happen once I introduce react-hook-form and validate on the front end as well:

// actions.ts
export const addDynamoDBConnection =
  zact(
    z.object({
      workspaceId: z.string(),
      dataSourceCredentials: z.object({
        secretAccessKey: z.string().min(6),
        accessKeyId: z.string().min(6),
        region: z.string().min(3),
        datasourceName: z.string().min(6),
      }),
    })
  )(
  async ({
    workspaceId,
    dataSourceCredentials: {
      accessKeyId,
      secretAccessKey,
      region,
      datasourceName,
    },
  }: {
    workspaceId: string;
    dataSourceCredentials: DataSourceCredentials["dynamodb"];
  }) => {
...
  })

// actions.ts
export const addDynamoDBConnection =
  zact(
    z.object({
      workspaceId: z.string(),
      dataSourceCredentials: z.object({
        secretAccessKey: z.string().min(6),
        accessKeyId: z.string().min(6),
        region: z.string().min(3),
        datasourceName: z.string().min(6),
      }),
    })
  )(
  async ({
    workspaceId,
    dataSourceCredentials: {
      accessKeyId,
      secretAccessKey,
      region,
      datasourceName,
    },
  }: {
    workspaceId: string;
    dataSourceCredentials: DataSourceCredentials["dynamodb"];
  }) => {
...
  })

// modal.tsx
...
  const {
    mutate,
    data,
    isLoading: addingDatasource,
    // error,
 } = useZact(datasource.addConnection);
...
  const form = useForm<z.infer<typeof dynamodbSchema>>({
    resolver: zodResolver(datasource.schema),
  });
const onSubmit = () => {
        mutate({
        dataSourceCredentials:
          dataSourceCredentials as DataSourceCredentials["dynamodb"],
        workspaceId,
      });
}
      return <form onSubmit={(...args) => form.handleSubmit(onSubmit)(...args)}>
...
</form>

// modal.tsx
...
  const {
    mutate,
    data,
    isLoading: addingDatasource,
    // error,
 } = useZact(datasource.addConnection);
...
  const form = useForm<z.infer<typeof dynamodbSchema>>({
    resolver: zodResolver(datasource.schema),
  });
const onSubmit = () => {
        mutate({
        dataSourceCredentials:
          dataSourceCredentials as DataSourceCredentials["dynamodb"],
        workspaceId,
      });
}
      return <form onSubmit={(...args) => form.handleSubmit(onSubmit)(...args)}>
...
</form>

removing zact altogether fixes this and maybe including backend validation is overkill?

2 replies

TTCTheo's Typesafe Cult

•Created by alan on 6/27/2023 in #questions

toasts vs banner notifications for forms

or anything in general. I found this thread https://ux.stackexchange.com/questions/91406/what-is-the-difference-between-alert-notification-banner-and-toast-message but am still a bit confused as to when it's more appropriate to use one vs the other. I'm personally partial to error messages close to the fields that caused them over toasts which would just be an error soup crammed into a single box. This makes me think that toasts don't really have a meaningful role. I suppose toasts are good for success messages for a particular operation?

3 replies

TTCTheo's Typesafe Cult

•Created by alan on 6/27/2023 in #questions

t3 app in turborepo now throws 404 error when accessing root

7 replies