Theo's Typesafe Cult•10mo ago

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?

3 Replies

kaleembhatti•10mo ago

I am not that good with typescript but this is the github page https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/no-unsafe-call.md maybe set a type to the parser function or to it's returned value or just double check your WpMenuItem type.

GitHub

typescript-eslint/packages/eslint-plugin/docs/rules/no-unsafe-call....

:sparkles: Monorepo for all the tooling which enables ESLint to support TypeScript - typescript-eslint/typescript-eslint

mosesintechOP•10mo ago

Thank you for the reply 🙂 The parser can take a string, so I assumed {parser(${item.label})} would work. The function already comes with a return type, which is why I'm pretty confused. The package defines it as typeof domToReact. As far as I can tell, it doesn't return any. Could the linter just be wrong here?

kaleembhatti•10mo ago

Could be Try refreshing the typescript server

Gaming

Programming

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