Code blocks in .mdx files display warnings in browser console

[justb3a]

Create a .mdx file, add code block:

# Headline

Content

\```
some code
without the back slashes
\```

results in

Warning: A props object containing a "key" prop is being spread into JSX:
  let props = {key: someKey, className: ..., children: ..., style: ...};
  <span {...props} />
React keys must be passed directly to JSX without using spread:
  let props = {className: ..., children: ..., style: ...};
  <span key={someKey} {...props} />

Reproduction

https://stackblitz.com/edit/ladle-g4whwj?file=src%2Fmdx.stories.mdx

Open console in browser to see warning.

It is related to the latest react version starting with ^18.3.0. I could only reproduce it after pinning the version to the latest version we're using. Checking 18.2.0 works without warnings.

  "dependencies": {
    "react": "18.3.1",
  }

pnpm ladle dev

Navigate to the the story: Mdx > Welcome, check browser console.

Environment

• OS: macOS
• Browser: chrome, firefox (latest)
• react/react-dom: 18.3.1

[StreakingMan]

It also occurred in the TSX file.