Skip to content

The nonce property is stripped off of React 19 style tags during SSR #76317

@Janpot

Description

@Janpot

Link to the code that reproduces this issue

https://stackblitz.com/edit/stackblitz-starters-yo9j1dc5

To Reproduce

  1. defined a style tag in a server component and render it in a server component. Add a nonce property:
    const css = (
      <style href="foo" precedence="bar" nonce="12345">{`
        body {
          background: red;
        }
      `}</style>
    );
  2. build and run the app, then inspect the html source (for stackblitz, open the app in a new tab first)

Current vs. Expected behavior

it shows

...<style data-precedence="bar" data-href="foo">
  body {
  background: red;
}</style>...

and it should be

...<style data-precedence="bar" data-href="foo" nonce="12345">
  body {
  background: red;
}</style>...

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: Ubuntu 20.04.0 LTS Fri Feb 21 2025 11:04:57 GMT+0100 (Central European Standard Time)
  Available memory (MB): NaN
  Available CPU cores: 8
Binaries:
  Node: 18.20.3
  npm: 10.2.3
  Yarn: 1.22.19
  pnpm: 8.15.6
Relevant Packages:
  next: 15.2.0-canary.67 // Latest available version is detected (15.2.0-canary.67).
  eslint-config-next: 15.2.0-canary.67
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

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

Not sure

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

next dev (local), next build (local), next start (local)

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    ReactRelated to React.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions