Cannot use media inside meta in Next.js

Question

So, I've been reading this article about PWA from web.dev and at some point they talk about color schemes,

I'm using Next.js and I tried to implement this:

<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)"  content="black">

It gives me an error:

Property 'media' does not exist on type 'DetailedHTMLProps<MetaHTMLAttributes<HTMLMetaElement

so, is there anyway to implement the code above in next.js?

Answer 1

Edit: Fixed by DefinitelyTyped#54936. Update your @types/react to latest patch release.

---

The media attribute on meta tags has become a part of the HTML standard recently. And isn't even supported in latest stable release of any popular browser (Chrome, Safari, Firefox, Edge) (as of 4th Aug, 2021). It appears the type definitions for this are not yet present on @types/react.

For now, if you want, you can add the below type definitions and include the file in your tsconfig.json.

// eslint-disable-next-line @typescript-eslint/no-unused-vars
import type * as React from 'react';

declare module 'react' {
  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
  interface MetaHTMLAttributes<T> extends HTMLAttributes<T> {
    media?: string | undefined;
  }
}