React does not recognize the `fetchPriority` prop on a DOM element. about next.js HOT 33 CLOSED

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.

from next.js.

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

from next.js.

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.

from next.js.

Change "react": "^18" to "react": "18.2.0"

neither this nor canary fix the issue for me. "next": "14.2.3", "react": "^18.2.0", "jest": "^29.7.0"

Try "react": "18.2.0" (without ^). "react": "^18.2.0" will install react 18.2.0 or higher.

from next.js.

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

• PR with the fix #65235

from next.js.

Change "react": "^18" to "react": "18.2.0"

from next.js.

This is fixed in [email protected]

from next.js.

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

from next.js.

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

from next.js.

After migrating from Next 12 to Next 13 (13.5.6), the react version was also bumped up to 18.3.1

Next.js 13 has no requirement of React 18.3. You can continue to use React 18.2

Note that React 18.2 and 18.3 are identical besides additional warnings.

See https://react.dev/blog/2024/04/25/react-19-upgrade-guide

To help make the upgrade to React 19 easier, we’ve published a [email protected] release that is identical to 18.2 but adds warnings for deprecated APIs and other changes that are needed for React 19.

from next.js.

This is fixed on the canary channel.

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

from next.js.

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

from next.js.

So the solution is to upgrade NextJS to latest version?

from next.js.

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

I am using render() from "@testing-library/react" or "@testing-library/jest-dom" BUT facing the same issue in the following circumstances:

1. "next": "14.2.3"
2. "react": "^18"
3. "jest": "^29.7.0",

Could you please provide any workaround on this?

from next.js.

Same error on react 18.3

from next.js.

This is fixed in [email protected]

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

from next.js.

same waring, any use of Image from Next/Image

from next.js.

Same problem

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

from next.js.

I get the same problem when using v14.2.3

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

from next.js.

Same as facebook/react#25682 ? Regression?

from next.js.

same here

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

from next.js.

Was this issue solved? I have same issue with it 😢

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

from next.js.

Happened on next 13.5.6 and react 18.2.0

from next.js.

@Islam-AbdElhakiim Take a look at the PR description #65235

from next.js.

@styfle After migrating from Next 12 to Next 13 (13.5.6), the react version was also bumped up to 18.3.1. Thus, projects with Next 13 are also being impacted by this error and we don't have the option to jump to the canary version without migrating to Next 14 first. A quick fix would be to drop the react version of our project to avoid the issue but that could lead to some problems down the line as well. Could there be a release for Next 13 to fix this issue?

from next.js.

So the solution is to upgrade NextJS to latest version?

The fix for the issue is included in the latest canary versions of NextJS (which are released daily), I don't know of a stable release with the fix.

from next.js.

This is fixed on the canary channel.

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

Canary didn't worked for me

from next.js.

Change "react": "^18" to "react": "18.2.0"

neither this nor canary fix the issue for me.
"next": "14.2.3", "react": "^18.2.0", "jest": "^29.7.0"

from next.js.

Yup, just updated to React 18.3.1 and see this error for the first Image component it finds.

from next.js.

18.2.0

this worked for me and resolved the error 👌 thank you

from next.js.

This keeps happening. It should be noted that this only happens to me when I run my tests. It does NOT happen when doing npm run dev or npm run build/start.

I'm using:

• next 12.2.3
• jest 29.7.0
• @testing-library/react 15.0.7
• @testing-library/jest-dom 6.4.5

from next.js.

mesmo aqui, corrigido depois e "react": "18.2.0"``"react-dom": "18.2.0"

Perfeito, aqui funcionou, WORKKKK

from next.js.

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.

from next.js.