Skip to content

prism-react-renderer@1.x causes React 18.3 key-in-spread console errors #2929

@heyitsbryanm

Description

@heyitsbryanm

Description

`@stoplight/mosaic-code-viewer` depends on `prism-react-renderer@^1.2.1`. In React 18.3+, spreading a props object containing a `key` property into JSX logs a red console error:

Warning: A props object containing a "key" prop is being spread into JSX.
React keys must be passed directly to JSX without using spread.

This is triggered by `getLineProps` and `getTokenProps` in prism-react-renderer v1.x — both methods include `key` in their returned object, which is then spread into JSX by `mosaic-code-viewer`'s render code.

Impact

Red console errors on any page using the `` component. The UI remains functional, but this will become a hard error in React 19.

Root cause

`prism-react-renderer@2.x` already fixes this by removing `key` from the returned props objects. The fix requires `@stoplight/mosaic-code-viewer` (and dependents) to upgrade their `prism-react-renderer` dependency from `^1.2.1` to `^2.x`.

Workaround

Patch `prism-react-renderer@1.3.5` to remove `key` from the objects returned by `getLineProps` and `getTokenProps`.

Environment

  • `@stoplight/elements`: 9.0.19
  • `@stoplight/mosaic-code-viewer`: 1.53.5
  • `prism-react-renderer`: 1.3.5
  • React: 18.3.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions