'Warning: flushSync called inside a lifecycle method' when using Switch or Checkbox inside Radix UI dialog

[chrber04]

I'm encountering a warning related to the usage of flushSync when utilizing switches or checkboxes inside a Radix UI dialog in my Next.js application. The Next.js application is served in my NX monorepo. The warning appears in the browser console and seems to only affect these specific components within the dialog, specifically when they are toggled on/off.

app-index.js:31 Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task. at $6be4966fd9bbc698$var$BubbleInput (webpack-internal:///(app-pages-browser)/../../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@radix-ui/react-switch/dist/index.mjs:113:22) at Provider (webpack-internal:///(app-pages-browser)/../../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]/node_modules/@radix-ui/react-context/dist/index.mjs:47:28) at eval (webpack-internal:///(app-pages-browser)/../../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@radix-ui/react-...

The error log is a long one and it leads back to the dialog component, and when I use the switch/checkbox outside of the dialog, no warning is logged.

Steps to Reproduce

1. Open the dialog that contains either a switch or checkbox component.
2. Interact with the switch or checkbox.
3. Observe the warning message in the browser's console.

Expected Behavior The components should work without any warnings or errors.

Actual Behavior The warning message is displayed in the console every time a switch or checkbox is used inside a dialog.

Additional Information browser: Chrome package manager: pnpm next.js version: ^13.4.13, radix-ui/react-dialog version: ^1.0.4 radix-ui/react-switch version: ^1.0.3

I'm currently working to understand the root cause of this warning and would appreciate any insights or assistance in resolving it.

[Gabriel-Ribeiroo]

I'm getting the same warning

[jp-hedilog]

am getting similar, but with a switch inside a dropdownmenu

[marvsman]

Same issue here..

[hamishtaplin]

Same here with Switch inside a Dialog

[horiuchi]

Same issue here with Checkbox inside a DropdownMenu.

[vetnio]

I also got this issue for my Switch inside a Dialog. I removed all states and hooks and the error still occurs.

[iantanwx]

I got this issue using Form and Input inside Dialog. Only happens on mount. Quite weird.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[Dindonix]

i just ran into this problem with a Switch inside a DropDownMenuItem.