Adding httpEquiv: "content-type" throws a type error

[sidster-io]

Environment info: node: 14.x.x next-seo: "^4.28.1" @type/next-seo: "^2.1.2"

My seo-config.ts

export default {
  titleTemplate: "%s | My Page",
  description: "My page description",
  noindex: false,
  nofollow: false,
  openGraph: {
    description: "My page description",
    images: [{ url: "/favicon.ico" }],
  },
  additionalLinkTags: [
    {
      rel: "icon",
      href: "/favicon.ico",
    },
  ],
  additionalMetaTags: [
    {
      name: "viewport",
      content: "width=device-width, initial-scale=1",
    },
    {
      httpEquiv: "content-type",
      content: "text/html; charset=UTF-8",
    },
  ],
};

Error:

Type error: No overload matches this call.
  Overload 1 of 2, '(props: DefaultSeoProps | Readonly<DefaultSeoProps>): DefaultSeo', gave the following error.
    Type '{ titleTemplate: string; description: string; noindex: boolean; nofollow: boolean; openGraph: { description: string; images: { url: string; }[]; }; additionalLinkTags: { rel: string; href: string; }[]; additionalMetaTags: ({ ...; } | { ...; })[]; }' is not assignable to type 'Readonly<DefaultSeoProps>'.
      Types of property 'additionalMetaTags' are incompatible.
        Type '({ name: string; content: string; httpEquiv?: undefined; } | { httpEquiv: string; content: string; name?: undefined; })[]' is not assignable to type 'readonly MetaTag[]'.
          Type '{ name: string; content: string; httpEquiv?: undefined; } | { httpEquiv: string; content: string; name?: undefined; }' is not assignable to type 'MetaTag'.
            Type '{ httpEquiv: string; content: string; name?: undefined; }' is not assignable to type 'MetaTag'.
              Type '{ httpEquiv: string; content: string; name?: undefined; }' is not assignable to type 'HTTPEquivMetaTag'.
                Types of property 'httpEquiv' are incompatible.
                  Type 'string' is not assignable to type '"content-type" | "content-security-policy" | "default-style" | "x-ua-compatible" | "refresh"'.
  Overload 2 of 2, '(props: DefaultSeoProps, context: any): DefaultSeo', gave the following error.
    Type '{ titleTemplate: string; description: string; noindex: boolean; nofollow: boolean; openGraph: { description: string; images: { url: string; }[]; }; additionalLinkTags: { rel: string; href: string; }[]; additionalMetaTags: ({ ...; } | { ...; })[]; }' is not assignable to type 'Readonly<DefaultSeoProps>'.
      Types of property 'additionalMetaTags' are incompatible.
        Type '({ name: string; content: string; httpEquiv?: undefined; } | { httpEquiv: string; content: string; name?: undefined; })[]' is not assignable to type 'readonly MetaTag[]'.

[stale[bot]]

Is this still relevant? If so, what is blocking it? Is there anything you can do to help move it forward?

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[nyedidikeke]

@sidster-io It's a bug. Until fixed, you may want to achieve same via your pages/_app.txs as below;

import type { AppProps } from 'next/app'
import { DefaultSeo, NextSeo } from 'next-seo'
import SEO from '../next-seo.config'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <DefaultSeo {...SEO} />
      <NextSeo
        additionalMetaTags={[
          {
            httpEquiv: 'content-type',
            content: 'text/html; charset=UTF-8'
          }
        ]}
      />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp