Skip to content

Warning with fetchPriority in React 18.3.1 #100

@sampayo

Description

@sampayo

Hi I updated to React 18.3.1 and react-datocms 6.0.3 and I am getting

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 picture
    at div
.....

This issue appears to be related to a recent fix. The warning seems to be resolved if we use fetchpriority instead of fetchPriority in React 18.3.0 or newer:

  const [majorStr, minorStr] = version.split('.');
  const major = Number.parseInt(majorStr, 10);
  const minor = Number.parseInt(minorStr, 10);
  if (major > 18 || (major === 18 && minor >= 3)) {
    // In React 18.3.0 or newer, we must use camelCase
    // prop to avoid "Warning: Invalid DOM property".
    // See https://github.com/facebook/react/pull/25927
    return { fetchPriority };
  }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions