Closed
Description
At the moment, the HTML fetchPriority is only supported written as fetchpriority, see #26810
But as per DefinitelyTyped/DefinitelyTyped#65972 it is required in @types/react to be written as fetchPriority as it is also for other props e.g. imageSrcSet.
With spelling it as camel-case, react ejects a warning:
Warning: React does not recognize the `fetchPriority` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `fetchpriority` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
at link
at head
at Head (webpack-internal:///./node_modules/next/dist/pages/_document.js:258:1)
at html
at Html (webpack-internal:///./node_modules/next/dist/pages/_document.js:680:119)
at MyDocument (webpack-internal:///./pages/_document.tsx:24:1)
Relevant versions:
"@types/react": "^18.2.20",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"next": "13.4.12",
"typescript": "^5.1.6",
Steps To Reproduce
Example component:
import React from "react";
import NextHead from "next/head";
type Props = {
webP: string;
};
export const ImagePreload: React.FC<Props> = React.memo(({ webP }) => (
<NextHead>
<link
key={`image-preload-${webP}`}
rel="preload"
as="image"
imageSrcSet={webP}
fetchPriority="high"
/>
</NextHead>
));
ImagePreload.displayName = "ImagePreload";