search

shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
70.73k stars 4.25k forks source link

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

Closed chrber04 closed 2 months ago

chrber04 commented 1 year ago

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/@radix-ui+react-switch@1.0.3_@types+react-dom@18.2.7_@types+react@18.2.18_react-dom@18.2.0_react@18.2.0/node_modules/@radix-ui/react-switch/dist/index.mjs:113:22) at Provider (webpack-internal:///(app-pages-browser)/../../../node_modules/.pnpm/@radix-ui+react-context@1.0.1_@types+react@18.2.18_react@18.2.0/node_modules/@radix-ui/react-context/dist/index.mjs:47:28) at eval (webpack-internal:///(app-pages-browser)/../../../node_modules/.pnpm/@radix-ui+react-switch@1.0.3_@types+react-dom@18.2.7_@types+react@18.2.18_react-dom@18.2.0_react@18.2.0/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 commented 8 months ago

I'm getting the same warning

jp-hedilog commented 8 months ago

am getting similar, but with a switch inside a dropdownmenu

marvsman commented 6 months ago

Same issue here..

hamishtaplin commented 5 months ago

Same here with Switch inside a Dialog

horiuchi commented 4 months ago

Same issue here with Checkbox inside a DropdownMenu.

vetnio commented 3 months ago

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

iantanwx commented 3 months ago

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

shadcn commented 2 months ago

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 commented 1 month ago

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

tgds commented 12 hours ago

@shadcn, this is absolutely still an issue