React 19 incompatibility with some components

[flrjrf]

Description

Non descriptive error causes ui not to render using some components. Downgrading to react 18 solved this issue. I'm not sure which components are affected but at least ActionList.Item and CheckBoxGroup.Label are affected. This error is consistent across chrome, safari and Firefox.

Steps to reproduce

1. initialize project, I used vite. npm create vite@latest
2. install primer npm install @primer/react
3. replace app.tsx with the following

import './App.css'
import { ActionList } from '@primer/react'

function App() {
    return (
        <ActionList>
            <ActionList.Item><span>Item 1</span></ActionList.Item>
        </ActionList>
    )
}

export default App

4. try to run npm run dev

Version

v37.17.0

Browser

Safari

[joshblack]

Hi there! 👋 I'm taking a look at this as a part of our React 19 compatibility work and I believe this issue has been resolved 🤞 I tested the ActionList example over in: #6097 and I tested CheckboxGroup with the following snippet:

"use client";

import { Checkbox, CheckboxGroup, FormControl } from "@primer/react";

export default function Home() {
  return (
    <CheckboxGroup>
      <CheckboxGroup.Label>Choices</CheckboxGroup.Label>
      <FormControl>
        <Checkbox value="one" />
        <FormControl.Label>Choice one</FormControl.Label>
      </FormControl>
      <FormControl>
        <Checkbox value="two" />
        <FormControl.Label>Choice two</FormControl.Label>
      </FormControl>
      <FormControl>
        <Checkbox value="three" />
        <FormControl.Label>Choice three</FormControl.Label>
      </FormControl>
    </CheckboxGroup>
  );
}

Both of these were tested in the latest version of Next.js (v16). It seems like the issue is no longer present so I'm going to go ahead and close this out. If you are still seeing the issue, definitely let me know! Thanks again for taking the time to open this 🙏 Appreciate it a ton