React does not recognize the fetchPriority prop on a DOM element.

[KDederichs]

Link to the code that reproduces this issue

https://github.com/KDederichs/fetch-prio-reproducer

To Reproduce

npm install
jest

Current vs. Expected behavior

jest
  console.error
    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 img
        at /Users/USER/source_code/fetch-priority-reproducer/node_modules/next/src/client/image-component.tsx:212:5
        at /Users/USER/source_code/fetch-priority-reproducer/node_modules/next/src/client/image-component.tsx:372:5
        at Home

      4 | describe('Tests', () => {
      5 |     it('it renders without warning', async () => {
    > 6 |         const {container} = render(
        |                                   ^
      7 |             <Home/>
      8 |         )
      9 |     })

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
      at validateProperty$1 (node_modules/react-dom/cjs/react-dom.development.js:3757:7)
      at warnUnknownProperties (node_modules/react-dom/cjs/react-dom.development.js:3803:21)
      at validateProperties$2 (node_modules/react-dom/cjs/react-dom.development.js:3827:3)
      at validatePropertiesInDevelopment (node_modules/react-dom/cjs/react-dom.development.js:9541:5)
      at setInitialProperties (node_modules/react-dom/cjs/react-dom.development.js:9830:5)
      at finalizeInitialChildren (node_modules/react-dom/cjs/react-dom.development.js:10950:3)
      at completeWork (node_modules/react-dom/cjs/react-dom.development.js:22232:17)
      at completeUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26632:16)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26607:5)
      at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26505:5)
      at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26473:7)
      at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25777:74)
      at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
      at act (node_modules/react/cjs/react.development.js:2582:11)
      at node_modules/@testing-library/react/dist/act-compat.js:47:25
      at renderRoot (node_modules/@testing-library/react/dist/pure.js:180:26)
      at render (node_modules/@testing-library/react/dist/pure.js:271:10)
      at Object.<anonymous> (app/page.spec.tsx:6:35)

Should be no error there

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:12:41 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T8103
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 20.11.0
  npm: 10.2.4
  Yarn: 1.22.19
  pnpm: 8.15.1
Relevant Packages:
  next: 14.3.0-canary.30 // Latest available version is detected (14.3.0-canary.30).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Image (next/image)

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

_NEXT-3273

[tonymtz]

Updated to latest nextjs last night, this started to appear as soon as I imported Image from next/image.

[daybert]

same waring, any use of Image from Next/Image

[chadlinden]

Same as facebook/react#25682 ? Regression?

[styfle]

To be clear, the warning only happens when running jest, not next dev or next build, correct?

This sounds like an issue with @testing-library/react, not next.

[tr1s]

Same issue here after updating Next from 14.2.2 to 14.2.3 and React from 18.2.0 to 18.3.1.

Rolling back Next to 14.2.2 did not fix the error, however, keeping Next at 14.2.3 and rolling just React back to 18.2.0 fixed the error.

@styfle this happens using next dev, I don't have any testing libraries in my package.json. This seems to be an issue with the latest React update.

[styfle]

I see. This also seems to impact Pages Router + [email protected]

• PR with the fix fix(next/image): detect react@19 for fetchPriority prop #65235

[styfle]

This is fixed on the canary channel.

You can try it out today with npm install next@canary, thanks!

[Islam-AbdElhakiim]

@styfle Thank you it solved my issue, but can you explain to me what was the issue and how this package solved it?

[uphiago]

same here, fixed after "react": "18.2.0" and "react-dom": "18.2.0"

[NebraskaCoder]

I hope this mock fixes the issue. Hit thumbs up if it works and thumbs down if it didnt. And let me know the error.

jest.mock('next/image', () => {
  const MockedImage = ({ src, alt, fetchPriority, ...props }) => {
    return (
      <img src={src} alt={alt} data-fetch-priority={fetchPriority} {...props} />
    );
  };
  MockedImage.displayName = 'MockedImage';
  return MockedImage;
});

Here is a better mock for Typescript support (placed in __mocks__/next/image.tsx), which also works for plain Javascript projects and won't break if ref is used:

/* eslint-disable @next/next/no-img-element */

import React, { useMemo } from "react";

import type {
  StaticImageData,
  StaticRequire,
} from "next/dist/shared/lib/get-img-props";

type ImageProps = React.DetailedHTMLProps<
  React.ImgHTMLAttributes<HTMLImageElement>,
  HTMLImageElement
>;

type ModifiedImageProps = Omit<ImageProps, "src"> & {
  src?: string | (StaticRequire | StaticImageData);
};

const NextImage = React.forwardRef<HTMLImageElement, ModifiedImageProps>((props, ref) => {
  const { src, alt, ...rest } = props;

  const imageSrc = useMemo(() => {
    if (!src) {
      return undefined;
    }

    if (typeof src === "string") {
      return src;
    }

    if ("default" in src) {
      return src.default.src;
    }

    return src.src;
  }, [src]);

  return (
    <img
      ref={ref}
      src={imageSrc}
      alt={alt}
    />
  );
});

NextImage.displayName = "Image";

export default NextImage;

I have edited this mock to not pass most of the props. I can't see why this is a problem as Next/Image props don't exactly line up to HTMLImage props and something like fill={true} will cause Jest to go nuts.

[styfle]

This is fixed in [email protected]

[guillermo-avalos]

This is fixed in [email protected]

Yup. I can now confirm it’s been fixed in 14.2.4

[cobalt88]

Thank you for getting this fixed. Its one of those errors I haven't been able to get rid of for a while now lol.

[o-faro]

Seems not to be fixed. Just ran into this problem for the first time today after a fresh install.
[email protected] was installed together with [email protected] and [email protected]

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.