Error: flushSync was called from inside a lifecycle method.

[ovsw]

This error started happening only recently, previously the plugin worked fine in the (very limited) testing I did. UPDATE: this error only occurres when the Media Library listing of all images is in "Thumbnail mode" (details hidden). When turning on the toggle to "show details" the plugin works fine. this is still a big issue thoug, since the "no details" mode is the default and the UX for editors fails.

Steps:

1. Open Media Library Plugin Page
2. Page will show Prop Type error in console on load (see below)
3. Click on any image thumbnail
4. Sanity will crash with the flushSync error, showing an error page (details below) and the console will also show errors (also added below)

Tried restarting Sanity, of course. Did not fix anything.

Sanity Versions

@sanity/cli                   2.30.2 (up to date)
@sanity/base                  2.30.1 (up to date)
@sanity/core                  2.30.2 (up to date)
@sanity/default-layout        2.30.1 (up to date)
@sanity/default-login         2.30.1 (up to date)
@sanity/desk-tool             2.30.1 (up to date)
@sanity/eslint-config-studio   2.0.0 (up to date)
@sanity/vision                2.30.1 (up to date)

Packages

"dependencies": {
    "@sanity/base": "^2.30.1",
    "@sanity/core": "^2.30.2",
    "@sanity/default-layout": "^2.30.1",
    "@sanity/default-login": "^2.30.1",
    "@sanity/desk-tool": "^2.30.1",
    "@sanity/eslint-config-studio": "^2.0.0",
    "@sanity/vision": "^2.30.1",
    "a11y-react-emoji": "^1.2.0",
    "classnames": "^2.3.1",
    "eslint": "^8.6.0",
    "phosphor-react": "^1.4.1",
    "prop-types": "^15.7",
    "react": "^17.0",
    "react-dom": "^17.0",
    "react-icons": "^4.4.0",
    "sanity-plugin-icon-picker": "^2.0.2",
    "sanity-plugin-media-library": "^2.0.2",
    "sanity-plugin-note-field": "^1.1.4",
    "sanity-plugin-parts-list": "^1.0.2",
    "sanity-plugin-prefixed-slug": "^1.0.0",
    "styled-components": "^5.2.0"
  },

Error details below

Collapsed, for readability:

Prop Type Error

``` checkPropTypes.js:20 Warning: Failed prop type: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. in input (created by styled.input) in styled.input (created by ForwardRef(Switch)) in span (created by styled.span) in styled.span (created by ForwardRef(Switch)) in ForwardRef(Switch) (created by FilterList) in div (created by ForwardRef(Inline)) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Inline)) in ForwardRef(Inline) (created by FilterList) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Container)) in ForwardRef(Container) (created by FilterList) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Stack)) in ForwardRef(Stack) (created by FilterList) in FilterList (created by Sidebar) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Stack)) in ForwardRef(Stack) (created by Sidebar) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Stack)) in ForwardRef(Stack) (created by Sidebar) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Flex)) in ForwardRef(Flex) (created by Sidebar) in Sidebar (created by App) in div (created by styled.div) in styled.div (created by App) in div (created by styled.div) in styled.div (created by UploadDropArea) in UploadDropArea (created by App) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Card)) in Fe (created by ThemeProvider) in ThemeProvider (created by ThemeColorProvider) in ThemeColorProvider (created by ForwardRef(Card)) in ForwardRef(Card) (created by App) in div (created by styled.div) in styled.div (created by App) in App (created by AppContainer) in ToastProvider (created by AppContainer) in Fe (created by ThemeProvider) in ThemeProvider (created by AppContainer) in AppContainer (created by RenderTool) in ErrorBoundary (created by RenderTool) in RenderTool (created by SchemaErrorReporter) in RouteScope (created by SchemaErrorReporter) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Flex)) in ForwardRef(Flex) (created by Styled(Component)) in Styled(Component) (created by SchemaErrorReporter) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Flex)) in ForwardRef(Flex) (created by Styled(Component)) in Styled(Component) (created by SchemaErrorReporter) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Flex)) in ForwardRef(Flex) (created by Styled(Component)) in Styled(Component) (created by SchemaErrorReporter) in SchemaErrorReporter (created by DefaultLayout) in DefaultLayout (created by DefaultLayoutRoot) in RouterProvider (created by DefaultLayoutRoot) in LoginWrapper (created by NormalizedLoginWrapper) in NormalizedLoginWrapper (created by DefaultLayoutRoot) in DefaultLayoutRoot (created by AppProvider) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Card)) in Fe (created by ThemeProvider) in ThemeProvider (created by ThemeColorProvider) in ThemeColorProvider (created by ForwardRef(Card)) in ForwardRef(Card) (created by Styled(Component)) in Styled(Component) (created by AppProvider) in SnackbarProvider (created by AppProvider) in ToastProvider (created by AppProvider) in LayerProvider (created by AppProvider) in PortalProvider (created by AppProvider) in UserColorManagerProvider (created by AppProvider) in AppProvider (created by SanityRoot) in Fe (created by ThemeProvider) in ThemeProvider (created by SanityRoot) in ZIndexProvider (created by SanityRoot) in SanityRoot in AppContainer ```

Sanity Page Errors:

``` Error: flushSync was called from inside a lifecycle method. It cannot be called when React is already rendering. Check the browser’s console for details. ``` Stack Trace ``` Error: flushSync was called from inside a lifecycle method. It cannot be called when React is already rendering. at Object.flushSync (/static/js/vendor.bundle.js:26122:15) at fn (/static/js/app.bundle.js:121525:61) at forceUpdate (/static/js/app.bundle.js:94600:21) at http://localhost:3333/static/js/app.bundle.js:36188:22 at commitHookEffectListMount (/static/js/vendor.bundle.js:23936:26) at commitPassiveHookEffects (/static/js/vendor.bundle.js:23974:11) at HTMLUnknownElement.callCallback (/static/js/vendor.bundle.js:4393:14) at Object.invokeGuardedCallbackDev (/static/js/vendor.bundle.js:4442:16) at invokeGuardedCallback (/static/js/vendor.bundle.js:4497:31) at flushPassiveEffectsImpl (/static/js/vendor.bundle.js:27058:9) ``` Component Stack ``` in ForwardRef(Tooltip) (created by MediaGrid) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Card)) in Fe (created by ThemeProvider) in ThemeProvider (created by ThemeColorProvider) in ThemeColorProvider (created by ForwardRef(Card)) in ForwardRef(Card) (created by MediaGrid) in div (created by styled.div) in styled.div (created by DraggableMediaItem) in DraggableMediaItem (created by MediaGrid) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Flex)) in ForwardRef(Flex) (created by MediaGrid) in MediaGrid (created by MediaLibrary) in div (created by styled.div) in styled.div (created by MediaLibrary) in div (created by styled.div) in styled.div (created by MediaLibrary) in div (created by styled.div) in styled.div (created by MediaLibrary) in MediaLibrary (created by App) in div (created by styled.div) in styled.div (created by App) in div (created by styled.div) in styled.div (created by UploadDropArea) in UploadDropArea (created by App) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Card)) in Fe (created by ThemeProvider) in ThemeProvider (created by ThemeColorProvider) in ThemeColorProvider (created by ForwardRef(Card)) in ForwardRef(Card) (created by App) in div (created by styled.div) in styled.div (created by App) in App (created by AppContainer) in ToastProvider (created by AppContainer) in Fe (created by ThemeProvider) in ThemeProvider (created by AppContainer) in AppContainer (created by RenderTool) in ErrorBoundary (created by RenderTool) in RenderTool (created by SchemaErrorReporter) in RouteScope (created by SchemaErrorReporter) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Flex)) in ForwardRef(Flex) (created by Styled(Component)) in Styled(Component) (created by SchemaErrorReporter) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Flex)) in ForwardRef(Flex) (created by Styled(Component)) in Styled(Component) (created by SchemaErrorReporter) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Flex)) in ForwardRef(Flex) (created by Styled(Component)) in Styled(Component) (created by SchemaErrorReporter) in SchemaErrorReporter (created by DefaultLayout) in DefaultLayout (created by DefaultLayoutRoot) in RouterProvider (created by DefaultLayoutRoot) in LoginWrapper (created by NormalizedLoginWrapper) in NormalizedLoginWrapper (created by DefaultLayoutRoot) in DefaultLayoutRoot (created by AppProvider) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Card)) in Fe (created by ThemeProvider) in ThemeProvider (created by ThemeColorProvider) in ThemeColorProvider (created by ForwardRef(Card)) in ForwardRef(Card) (created by Styled(Component)) in Styled(Component) (created by AppProvider) in SnackbarProvider (created by AppProvider) in ToastProvider (created by AppProvider) in LayerProvider (created by AppProvider) in PortalProvider (created by AppProvider) in UserColorManagerProvider (created by AppProvider) in AppProvider (created by SanityRoot) in Fe (created by ThemeProvider) in ThemeProvider (created by SanityRoot) in ZIndexProvider (created by SanityRoot) in SanityRoot in AppContainer ```

Console Errors:

``` react-dom.development.js:89 Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components. in input (created by styled.input) in styled.input (created by ForwardRef(TextInput)) in span (created by styled.span) in styled.span (created by ForwardRef(TextInput)) in span (created by styled.span) in styled.span (created by ForwardRef(TextInput)) in ForwardRef(TextInput) (created by LabelWithInput) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Stack)) in ForwardRef(Stack) (created by LabelWithInput) in LabelWithInput (created by AssetModal) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Stack)) in ForwardRef(Stack) (created by AssetModal) in div (created by styled.div) in styled.div (created by AssetModal) in form (created by AssetModal) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(DialogCard)) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Flex)) in ForwardRef(Flex) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(DialogCard)) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Card)) in Fe (created by ThemeProvider) in ThemeProvider (created by ThemeColorProvider) in ThemeColorProvider (created by ForwardRef(Card)) in ForwardRef(Card) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(DialogCard)) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Container)) in ForwardRef(Container) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(DialogCard)) in ForwardRef(DialogCard) (created by ForwardRef(Dialog)) in div (created by styled.div) in styled.div (created by ForwardRef(LayerChildren)) in ForwardRef(LayerChildren) (created by ForwardRef(Layer)) in LayerProvider (created by ForwardRef(Layer)) in ForwardRef(Layer) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Dialog)) in Portal (created by ForwardRef(Dialog)) in ForwardRef(Dialog) (created by Modal) in div (created by styled.div) in styled.div (created by ForwardRef(LayerChildren)) in ForwardRef(LayerChildren) (created by ForwardRef(Layer)) in LayerProvider (created by ForwardRef(Layer)) in ForwardRef(Layer) (created by Modal) in Modal (created by AssetModal) in AssetModal (created by App) in div (created by styled.div) in styled.div (created by UploadDropArea) in UploadDropArea (created by App) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Card)) in Fe (created by ThemeProvider) in ThemeProvider (created by ThemeColorProvider) in ThemeColorProvider (created by ForwardRef(Card)) in ForwardRef(Card) (created by App) in div (created by styled.div) in styled.div (created by App) in App (created by AppContainer) in ToastProvider (created by AppContainer) in Fe (created by ThemeProvider) in ThemeProvider (created by AppContainer) in AppContainer (created by RenderTool) in ErrorBoundary (created by RenderTool) in RenderTool (created by SchemaErrorReporter) in RouteScope (created by SchemaErrorReporter) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Flex)) in ForwardRef(Flex) (created by Styled(Component)) in Styled(Component) (created by SchemaErrorReporter) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Flex)) in ForwardRef(Flex) (created by Styled(Component)) in Styled(Component) (created by SchemaErrorReporter) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Flex)) in ForwardRef(Flex) (created by Styled(Component)) in Styled(Component) (created by SchemaErrorReporter) in SchemaErrorReporter (created by DefaultLayout) in DefaultLayout (created by DefaultLayoutRoot) in RouterProvider (created by DefaultLayoutRoot) in LoginWrapper (created by NormalizedLoginWrapper) in NormalizedLoginWrapper (created by DefaultLayoutRoot) in DefaultLayoutRoot (created by AppProvider) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Card)) in Fe (created by ThemeProvider) in ThemeProvider (created by ThemeColorProvider) in ThemeColorProvider (created by ForwardRef(Card)) in ForwardRef(Card) (created by Styled(Component)) in Styled(Component) (created by AppProvider) in SnackbarProvider (created by AppProvider) in ToastProvider (created by AppProvider) in LayerProvider (created by AppProvider) in PortalProvider (created by AppProvider) in UserColorManagerProvider (created by AppProvider) in AppProvider (created by SanityRoot) in Fe (created by ThemeProvider) in ThemeProvider (created by SanityRoot) in ZIndexProvider (created by SanityRoot) in SanityRoot in AppContainer ``` ``` Error: flushSync was called from inside a lifecycle method. It cannot be called when React is already rendering. at Object.flushSync (react-dom.development.js:21918:1) at fn (usePopper.js:44:1) at forceUpdate (createPopper.js:184:1) at sanity-ui.module.js:6780:1 at commitHookEffectListMount (react-dom.development.js:19732:1) at commitPassiveHookEffects (react-dom.development.js:19770:1) at HTMLUnknownElement.callCallback (react-dom.development.js:189:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:238:1) at invokeGuardedCallback (react-dom.development.js:293:1) at flushPassiveEffectsImpl (react-dom.development.js:22854:1) ``` ``` The above error occurred in the component: in ForwardRef(Tooltip) (created by MediaGrid) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Card)) in Fe (created by ThemeProvider) in ThemeProvider (created by ThemeColorProvider) in ThemeColorProvider (created by ForwardRef(Card)) in ForwardRef(Card) (created by MediaGrid) in div (created by styled.div) in styled.div (created by DraggableMediaItem) in DraggableMediaItem (created by MediaGrid) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Flex)) in ForwardRef(Flex) (created by MediaGrid) in MediaGrid (created by MediaLibrary) in div (created by styled.div) in styled.div (created by MediaLibrary) in div (created by styled.div) in styled.div (created by MediaLibrary) in div (created by styled.div) in styled.div (created by MediaLibrary) in MediaLibrary (created by App) in div (created by styled.div) in styled.div (created by App) in div (created by styled.div) in styled.div (created by UploadDropArea) in UploadDropArea (created by App) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Card)) in Fe (created by ThemeProvider) in ThemeProvider (created by ThemeColorProvider) in ThemeColorProvider (created by ForwardRef(Card)) in ForwardRef(Card) (created by App) in div (created by styled.div) in styled.div (created by App) in App (created by AppContainer) in ToastProvider (created by AppContainer) in Fe (created by ThemeProvider) in ThemeProvider (created by AppContainer) in AppContainer (created by RenderTool) in ErrorBoundary (created by RenderTool) in RenderTool (created by SchemaErrorReporter) in RouteScope (created by SchemaErrorReporter) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Flex)) in ForwardRef(Flex) (created by Styled(Component)) in Styled(Component) (created by SchemaErrorReporter) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Flex)) in ForwardRef(Flex) (created by Styled(Component)) in Styled(Component) (created by SchemaErrorReporter) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Flex)) in ForwardRef(Flex) (created by Styled(Component)) in Styled(Component) (created by SchemaErrorReporter) in SchemaErrorReporter (created by DefaultLayout) in DefaultLayout (created by DefaultLayoutRoot) in RouterProvider (created by DefaultLayoutRoot) in LoginWrapper (created by NormalizedLoginWrapper) in NormalizedLoginWrapper (created by DefaultLayoutRoot) in DefaultLayoutRoot (created by AppProvider) in div (created by styled.div) in styled.div (created by ForwardRef(Box)) in ForwardRef(Box) (created by Styled(Component)) in Styled(Component) (created by ForwardRef(Card)) in Fe (created by ThemeProvider) in ThemeProvider (created by ThemeColorProvider) in ThemeColorProvider (created by ForwardRef(Card)) in ForwardRef(Card) (created by Styled(Component)) in Styled(Component) (created by AppProvider) in SnackbarProvider (created by AppProvider) in ToastProvider (created by AppProvider) in LayerProvider (created by AppProvider) in PortalProvider (created by AppProvider) in UserColorManagerProvider (created by AppProvider) in AppProvider (created by SanityRoot) in Fe (created by ThemeProvider) in ThemeProvider (created by SanityRoot) in ZIndexProvider (created by SanityRoot) in SanityRoot in AppContainer React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. logCapturedError @ react-dom.development.js:19528 logError @ react-dom.development.js:19565 update.payload @ react-dom.development.js:20724 getStateFromUpdate @ react-dom.development.js:12294 processUpdateQueue @ react-dom.development.js:12425 updateClassInstance @ react-dom.development.js:13186 updateClassComponent @ react-dom.development.js:17108 beginWork @ react-dom.development.js:18621 beginWork$1 @ react-dom.development.js:23180 performUnitOfWork @ react-dom.development.js:22158 workLoopSync @ react-dom.development.js:22131 performSyncWorkOnRoot @ react-dom.development.js:21757 (anonymous) @ react-dom.development.js:11090 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11040 flushSyncCallbackQueueImpl @ react-dom.development.js:11085 flushSyncCallbackQueue @ react-dom.development.js:11073 discreteUpdates$1 @ react-dom.development.js:21894 discreteUpdates @ react-dom.development.js:807 dispatchDiscreteEvent @ react-dom.development.js:4169 ```

[Aratramba]

@ovsw I've upgraded all dependencies and the error seems to be gone. Could you try upgrading to 2.1.0 and see if it works on your end?

[ovsw]

@Aratramba thanks, I'll do that next week, on vacation at the moment :)