Theo's Typesafe CultTTC
Theo's Typesafe Cult•2y ago•
4 replies
mosesintech

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>
  );
}


The code runs and does what I want it to. (It turns News &#038; 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?
Was this page helpful?