CuriouslyCory Posts - Answer Overflow

CuriouslyCory

•Created by CuriouslyCory on 2/28/2024 in #questions

create-t3-turbo adding tailwind to additional packages

I've figured this out in past versions but running into a wall here. - added a new package (used the generator) - added the same deps and dev deps that the ui package uses for tailwind - added the same tailwind.config.ts from ui - added the package to the next.config.ts => transpilePackages array - installed the package into the next project My component imports and loads in the nextjs project, but only tailwind classes used in the nextjs or ui projects are being compiled/included. E.g. if className="bg-red-500" is in my @acme/custom-component the class is not added to the style sheet, but if I add bg-red-500 to any component in @acme/nextjs or @acme/ui suddenly it works in my custom-component package as well.

4 replies

TTCTheo's Typesafe Cult

•Created by CuriouslyCory on 8/18/2023 in #questions

Hydration issue implementing getStaticProps

I switched my site over to using static generation and now I'm getting a hydration error, but only on production. When I turn off javascript and test the site everything looks good, but I'm getting errors in the console that the text doesn't match the server. Here's an abbreviated version of the code:

// home route
// ... npm package imports ...
import { appRouter } from "@/server/api/root";
import { rmRenderers } from "@/utils/react-markdown-renderers";
import { api } from "@/utils/api";
import { prisma } from "@/server/db";

const Home = () => {
  const articles = api.article.getAll.useQuery({ skip: 0, take: 20 });

  return (
  // ... display logic ...
    <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
      {articles?.data?.map((article) => (
        // .. display ...
      ))}
    </div>
  );
};

export default Home;

export const getStaticProps = async () => {
  const helpers = createServerSideHelpers({
    router: appRouter,
    ctx: { session: null, prisma },
    transformer: SuperJSON, // optional - adds superjson serialization
  });

  await helpers.article.getAll.prefetch({ skip: 0, take: 20 });
  return {
    props: {
      trpcState: helpers.dehydrate(),
    },
    revalidate: 1,
  };
};

// home route
// ... npm package imports ...
import { appRouter } from "@/server/api/root";
import { rmRenderers } from "@/utils/react-markdown-renderers";
import { api } from "@/utils/api";
import { prisma } from "@/server/db";

const Home = () => {
  const articles = api.article.getAll.useQuery({ skip: 0, take: 20 });

  return (
  // ... display logic ...
    <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
      {articles?.data?.map((article) => (
        // .. display ...
      ))}
    </div>
  );
};

export default Home;

export const getStaticProps = async () => {
  const helpers = createServerSideHelpers({
    router: appRouter,
    ctx: { session: null, prisma },
    transformer: SuperJSON, // optional - adds superjson serialization
  });

  await helpers.article.getAll.prefetch({ skip: 0, take: 20 });
  return {
    props: {
      trpcState: helpers.dehydrate(),
    },
    revalidate: 1,
  };
};

My pages/article/[slug].tsx file is very similar, but taking a static list as well, and works without hydration error, so I've ruled out things like layout components.

2 replies

TTCTheo's Typesafe Cult

•Created by CuriouslyCory on 8/10/2023 in #questions

.env parsing causing cypress failure

I'm adding cypress e2e tests to a project I'm migrating from Angular to create-t3-app and thought I'd try out component tests too. Unfortunately trying to run the component tests results in a failure when parsing the .env vars.

Error: Invalid environment variables
    at onValidationError (file:///home/curiouslycory/workspace/sudoswap/sudoswap_xyz/node_modules/@t3-oss/core/index.ts:128:13)
    at g (file:///home/curiouslycory/workspace/sudoswap/sudoswap_xyz/node_modules/@t3-oss/core/index.ts:140:12)
    at C (file:///home/curiouslycory/workspace/sudoswap/sudoswap_xyz/node_modules/@t3-oss/env-nextjs/index.ts:28:10)
    at file:///home/curiouslycory/workspace/sudoswap/sudoswap_xyz/src/env.mjs:4:20
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async file:///home/curiouslycory/workspace/sudoswap/sudoswap_xyz/next.config.mjs:5:1

Error: Invalid environment variables
    at onValidationError (file:///home/curiouslycory/workspace/sudoswap/sudoswap_xyz/node_modules/@t3-oss/core/index.ts:128:13)
    at g (file:///home/curiouslycory/workspace/sudoswap/sudoswap_xyz/node_modules/@t3-oss/core/index.ts:140:12)
    at C (file:///home/curiouslycory/workspace/sudoswap/sudoswap_xyz/node_modules/@t3-oss/env-nextjs/index.ts:28:10)
    at file:///home/curiouslycory/workspace/sudoswap/sudoswap_xyz/src/env.mjs:4:20
    at ModuleJob.run (node:internal/modules/esm/module_job:198:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async file:///home/curiouslycory/workspace/sudoswap/sudoswap_xyz/next.config.mjs:5:1

I've tried using dotenv-cli to make them available but cypress must be running additional commands that are missing them: npx dotenv-cli -e .env npx cypress open Additionally I tried adding the variables to a cypress.env.json but it looks like that is only made available to the test scripts and not the application. Hopefully I'm missing something simple and don't have to hack together a custom dev server script or something like that.

24 replies

TTCTheo's Typesafe Cult

•Created by CuriouslyCory on 1/25/2023 in #questions

Unsafe assignment of an `any` value

1 replies

TTCTheo's Typesafe Cult

•Created by CuriouslyCory on 1/4/2023 in #questions

Public folder from create-t3-app trpc router?

My google-fu is failing me! Can I access the content in the public folder from the API? I tried referencing it the way I would on the frontend ("/images/file/path.svg") and it doesn't seem to be able to see the files. I know I could append the domain, but I would like to access the files directly rather than over http.

20 replies

TTCTheo's Typesafe Cult

•Created by CuriouslyCory on 12/20/2022 in #questions

Video hosting solutions

I have a couple videos on a site I'm building and I'm trying to figure out what the best video hosting options are these days. Trying to avoid manually transcoding to all formats, and save bandwidth vs hosting on Vercel. What is everyone's favorite? Or maybe an all in one transcoding solution and I just host it in an s3 bucket?

10 replies

TTCTheo's Typesafe Cult

•Created by CuriouslyCory on 11/29/2022 in #questions

Best Practice - Handling undefined deps on custom use hook

Good day everyone! I know this is more of a react specific question, but I spend all day in Nextjs land so I thought I'd pose this question to you all. Been struggling a bit with something. What is everyone's favorite way to handle undefined deps for a useHook?

const useSomething = (someDep: string) => {
... something that requires "someDep" ...
}

const useSomething = (someDep: string) => {
... something that requires "someDep" ...
}

Obviously I can set someDep to be optional and check for it during runtime, but it feels like an anti-pattern given it really is required. Often libs seem to use an "enabled" parameter, but values passed in always fail the type check when they're possibly undefined even though enabled: false if dep is undefined.

1 replies

TTCTheo's Typesafe Cult

•Created by CuriouslyCory on 11/28/2022 in #questions

Best practices - defining types when lib doesn't export the type

I'm writing a hook that wraps a transaction from another library. The library returns a Promise<SendTransactionResult>, but SendTransactoinResult is not exported from the library. I'm writing a handler for the promise but I'm struggling with what the best practice would be for defining the type that this callback should expect.

 /*...inside hook...*/
// my function
const afterContractWrite = useCallback(
  (result: <HowWouldYouDefineThisType?>) => {
    onSettled?.();
    return result.wait();
  },
  [onSettled]
); 

//this method returns a Promise<SendTransactionResult> but the type is not exported from the lib so I can't just import it.
writeAsync?.() 
      .then(afterContractWrite)

 /*...inside hook...*/
// my function
const afterContractWrite = useCallback(
  (result: <HowWouldYouDefineThisType?>) => {
    onSettled?.();
    return result.wait();
  },
  [onSettled]
); 

//this method returns a Promise<SendTransactionResult> but the type is not exported from the lib so I can't just import it.
writeAsync?.() 
      .then(afterContractWrite)

How would you handle this?

7 replies

TTCTheo's Typesafe Cult

•Created by CuriouslyCory on 9/28/2022 in #questions

Typescript import best practices?

Is there a difference in the compiled package between import { useEffect } from "react" vs

import * from "react"
React.useEffect(() =>{})

import * from "react"
React.useEffect(() =>{})

? I remember someone showing how import Box from "@mui/material/Box"; was significantly different than import Box from "@mui/material"; and wasn't sure if this was similar.

11 replies

Gaming

Programming