警告：从生命周期方法内部调用了 flushSync

Question

Would anyone know how to debug and fix (or mute) following warning (apparently, Mantine is dropping react-popper in next major release)?

Everything works fine, but warning is making it very hard to debug other issues.

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 Popper (webpack-internal:///./node_modules/@mantine/core/esm/components/Popper/Popper.js:67:3)
    at div
    at eval (webpack-internal:///./node_modules/@mantine/core/esm/components/Box/Box.js:42:18)
    at Popover (webpack-internal:///./node_modules/@mantine/core/esm/components/Popover/Popover.js:76:85)
    at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:30:19811)
    at SecretTextareaWithLength (webpack-internal:///./src/main/routes/Create.tsx:106:48)
    at form
    at div
    at O (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:30:19811)
    at Create (webpack-internal:///./src/main/routes/Create.tsx:291:48)
    at Routes (webpack-internal:///./node_modules/react-router/index.js:920:5)
    at MenuEvents (webpack-internal:///./src/main/MenuEvents.tsx:34:55)
    at Router (webpack-internal:///./node_modules/react-router/index.js:854:15)
    at MemoryRouter (webpack-internal:///./node_modules/react-router/index.js:767:5)
    at MantineProvider (webpack-internal:///./node_modules/@mantine/styles/esm/theme/MantineProvider.js:66:3)
    at App (webpack-internal:///./src/main/App.tsx:40:35)

Answer 1

this is a bug in mantine When using Popper. it will be fixed in the next release.

one thing you can do is hack your local react copy to add conditional logic and skip this warning.