mosesintech Posts - Answer Overflow

mosesintech

•Created by mosesintech on 2/16/2024 in #questions

tRPC error handling

Anyone have any examples for the above? If a user inputs data they shouldn't, I get an error but am struggling with doing something meaningful with it. Just need some example code I can poke around.

3 replies

TTCTheo's Typesafe Cult

•Created by mosesintech on 2/13/2024 in #questions

html-react-parser and "Unsafe call of an `any` typed value".

Hello friends. I've got Next hooked up to a CMS. I'm using html-react-parser to parse the data for me and return readable content. The NavMenu component I'm using it in:

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { type WpMenuItem } from "@nextwp/core";
import parser from "html-react-parser";

export default function NavMenu(props: { items: WpMenuItem[] }) {
  const { items } = props;
  const pathname = usePathname();

  return (
    <ul className="flex flex-row items-center justify-around">
      {items?.map((item) => {
        return (
          <li key={`${item.label}`} className="m-4">
            <Link
              className={`${`${pathname}/` === `/${item.path}` ? "border-b-2 border-b-primary-gold-400" : ""} text-primary-gold-400`}
              href={`/${item.path}`}
            >
              {parser(`${item.label}`)}
            </Link>
          </li>
        );
      })}
    </ul>
  );
}

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { type WpMenuItem } from "@nextwp/core";
import parser from "html-react-parser";

export default function NavMenu(props: { items: WpMenuItem[] }) {
  const { items } = props;
  const pathname = usePathname();

  return (
    <ul className="flex flex-row items-center justify-around">
      {items?.map((item) => {
        return (
          <li key={`${item.label}`} className="m-4">
            <Link
              className={`${`${pathname}/` === `/${item.path}` ? "border-b-2 border-b-primary-gold-400" : ""} text-primary-gold-400`}
              href={`/${item.path}`}
            >
              {parser(`${item.label}`)}
            </Link>
          </li>
        );
      })}
    </ul>
  );
}

The code runs and does what I want it to. (It turns News & Updates into News & Updates). But the linter doesn't like it: Unsafe call of an any typed value.eslint@typescript-eslint/no-unsafe-call I thought it was a local issue, so I restarted the typescript and eslint servers. Restarted vscode. I searched the discord to see if others had the same issue. Tried other nonsense things, but my brain is running out of juice here. Have y'all run into this?

5 replies

TTCTheo's Typesafe Cult

•Created by mosesintech on 9/20/2023 in #questions

TypeScript error: Type 'string' is not assignable to union value

Hello friends. I've picked up my side project again this week and I'm trying to add a new feature (required field indicator). It's a component library for forms. It's expecting specific form data:

export interface Form {
  databaseId: number
  ... extra stuff ...
  customRequiredIndicator?: string | null
  requiredIndicator?: "TEXT" | "ASTERISK" | "CUSTOM" | null
  submitButton: Button
  formFields: { nodes: Field[] }
}

export interface Form {
  databaseId: number
  ... extra stuff ...
  customRequiredIndicator?: string | null
  requiredIndicator?: "TEXT" | "ASTERISK" | "CUSTOM" | null
  submitButton: Button
  formFields: { nodes: Field[] }
}

When a user passes in the form data, they may or may not include the requiredIndicator. If they do, it can be either "TEXT", "ASTERISK", "CUSTOM" or a null value. I thought I could tell TypeScript that these are the only 3 string values that it could be and have it work. But when I actually test it out, I get the following error: Type 'string' is not assignable to type '"TEXT" | "ASTERISK" | "CUSTOM" | null | undefined'. I've tried a bunch of things and can't seem to sort it out. I think the issue is that because I have no control over the data that the user is passing into the <Form> component, I can't use a type assertion. I'm thinking that just typing it as 'string' is fine enough. I just thought that TypeScript could do this too. I could stand to learn more, so I'm open to anything y'all have for me. Thanks!

10 replies

TTCTheo's Typesafe Cult

•Created by mosesintech on 5/17/2023 in #questions

SVGs in Next

Hey friends. I'm working on a new project and having some issues using SVGs. What is your recommended method for using SVGs in Next? I know there's a lot of answers online, but I'm wondering if there's a specific T3 way of doing this. Thanks! 😄

5 replies

TTCTheo's Typesafe Cult

•Created by mosesintech on 12/30/2022 in #questions

Anyone have experience sorting out a ChunkLoadError?

I'm working on a little side project in my free time, mostly to expand my skillset and learn new things. Basically, it's an npm package that you give info about a form you want to make and it'll make it for you. I'm lazy loading the form field components so that I only load them when they're needed. All works fine in development, but when I'm using it with real data in production I get this error: Loading chunk 216 failed. (error: http://localhost:8000/216.index.js) I don't have a lot of experience with webpack, so I'm guessing it's a config issue but I'm not sure where exactly to look. 216.index.js does exist in dist so I'm not sure why it 404s. Repo: https://github.com/TotalityWorks/wpgravitybundle/tree/feature/typesafe-v1 I'm playing around with it in Gatsby.js. wpgravitybundle@alpha

1 replies

Gaming

Programming