Skip to content
Get help on Slack

Issue with styled-components causing crashes in Sanity Studio after upgrade

19 replies
Last updated: Dec 7, 2020
Just upgraded from 
1.149.x
-> 
1.150.5
and our studio keeps crashing. Seems to be realated to us using styled-components to do some styling for blockEditor-rendering. This worked smoothly on the previous versions 😿
Sep 3, 2020, 1:03 PM
The ‘Desk’ tool crashedRetry
Show details
Stack trace:

TypeError: Failed to set an indexed property on 'CSSStyleDeclaration': Index property setter is not supported.
    at setValueForStyles (/static/js/vendor.bundle.js:10364:24)
    at setInitialDOMProperties (/static/js/vendor.bundle.js:11553:7)
    at setInitialProperties (/static/js/vendor.bundle.js:11784:3)
    at finalizeInitialChildren (/static/js/vendor.bundle.js:13263:3)
    at completeWork (/static/js/vendor.bundle.js:24762:17)
    at completeUnitOfWork (/static/js/vendor.bundle.js:27974:16)
    at performUnitOfWork (/static/js/vendor.bundle.js:27947:12)
    at workLoopSync (/static/js/vendor.bundle.js:27912:22)
    at performSyncWorkOnRoot (/static/js/vendor.bundle.js:27538:9)
    at <http://localhost:3333/static/js/vendor.bundle.js:16862:24>
Component stack:

Sep 3, 2020, 1:04 PM
    in span (created by styled.span)
    in styled.span (created by TextBlock)
    in div (created by DraggableBlockWrappper)
    in DraggableBlockWrappper
    in div
    in Unknown (created by TextBlock)
    in TextBlock
    in div (created by Header)
    in Header
    in div
    in Unknown (created by Element)
    in Element
    in Element (created by Children)
    in Children (created by Editable)
    in div (created by Editable)
    in Editable
    in Slate
    in Unknown (created by PortableTextSanityEditor)
    in div (created by PortableTextSanityEditor)
    in div (created by PortableTextSanityEditor)
    in div (created by PortableTextSanityEditor)
    in div (created by PortableTextSanityEditor)
    in PortableTextSanityEditor (created by PortableTextInput)
    in div (created by ActivateOnFocus)
    in div (created by ActivateOnFocus)
    in ActivateOnFocus (created by clickOutside(ActivateOnFocus))
    in clickOutside(ActivateOnFocus) (created by PortableTextInput)
    in div (created by PortableTextInput)
    in PortableTextInput (created by ForwardRef(PortableTextInput))
    in PortableTextEditor (created by ForwardRef(PortableTextInput))
    in ForwardRef(PortableTextInput) (created by PortableTextInputWithFocusAndBlur)
    in PortableTextInputWithFocusAndBlur (created by withPatches(PortableTextInputWithFocusAndBlur))
    in withPatches(PortableTextInputWithFocusAndBlur) (created by FormBuilderInput)
    in div (created by FormBuilderInput)
    in FormBuilderInput (created by Field)
    in div (created by Field)
    in Field (created by ObjectInput)
    in div (created by Fieldset)
    in div (created by Fieldset)
    in div (created by Fieldset)
    in fieldset (created by Fieldset)
    in div (created by Fieldset)
    in Fieldset (created by ObjectInput)
    in div (created by ObjectInput)
    in ObjectInput (created by FormBuilderInput)
    in div (created by FormBuilderInput)
    in FormBuilderInput (created by Field)
    in div (created by Field)
    in Field (created by ObjectInput)
    in div (created by ObjectInput)
    in div (created by ObjectInput)
    in ObjectInput (created by FormBuilderInput)
    in div (created by FormBuilderInput)
    in FormBuilderInput (created by SanityFormBuilder)
    in FormBuilderContext (created by SanityFormBuilderContext)
    in SanityFormBuilderContext (created by SanityFormBuilder)
    in SanityFormBuilder (created by EditForm)
    in form (created by EditForm)
    in EditForm (created by FormView)
    in div (created by RegionsWithIntersections)
    in div (created by RegionsWithIntersections)
    in RegionsWithIntersections (created by StickyOverlay)
    in StickyOverlay (created by Tracker)
    in Tracker (created by OverlayEnabled)
    in OverlayEnabled (created by FormView)
    in div (created by FormView)
    in FormView (created by DocumentPane)
    in div (created by ScrollContainer)
    in ScrollContainer (created by Pane)
    in div (created by Pane)
    in div (created by Pane)
    in Pane (created by Styleable(Pane))
    in Styleable(Pane) (created by TabbedPane)
    in TabbedPane (created by DocumentPane)
    in div (created by DocumentPane)
    in div (created by KeyboardShortcutResponder)
    in KeyboardShortcutResponder (created by GetHookCollectionState)
    in GetHookCollectionState (created by RenderActionCollectionState)
    in RenderActionCollectionState
    in Unknown (created by DocumentPane)
    in DocumentPane
    in Unknown
    in StreamingComponent
    in StreamingComponent (created by Context.Consumer)
    in WithInitialValueWrapper (created by DeskToolPane)
    in DeskToolPane (created by DeskToolPanes)
    in SplitPaneWrapper (created by DeskToolPanes)
    in div (created by Pane)
    in Pane (created by SplitPane)
    in div (created by SplitPane)
    in SplitPane (created by PanesSplitController)
    in div (created by PanesSplitController)
    in div (created by Pane)
    in Pane (created by SplitPane)
    in div (created by SplitPane)
    in SplitPane (created by PanesSplitController)
    in div (created by PanesSplitController)
    in div (created by Pane)
    in Pane (created by SplitPane)
    in div (created by SplitPane)
    in SplitPane (created by PanesSplitController)
    in div (created by PanesSplitController)
    in PanesSplitController (created by DeskToolPanes)
    in div (created by DeskToolPanes)
    in DeskToolPanes (created by DeskTool)
    in DeskTool (created by withRouter(DeskTool))
    in withRouter(DeskTool) (created by DeskToolPaneStateSyncer)
    in DeskToolPaneStateSyncer (created by RenderTool)
    in RenderTool (created by SchemaErrorReporter)
    in RouteScope (created by SchemaErrorReporter)
    in div (created by SchemaErrorReporter)
    in div (created by SchemaErrorReporter)
    in div (created by SchemaErrorReporter)
    in SchemaErrorReporter (created by DefaultLayout)
    in DefaultLayout (created by withRouter(DefaultLayout))
    in withRouter(DefaultLayout) (created by DefaultLayoutRoot)
    in RouterProvider (created by DefaultLayoutRoot)
    in LoginWrapper (created by DefaultLayoutRoot)
    in DefaultLayoutRoot (created by SanityRoot)
    in SnackbarProvider (created by SanityRoot)
    in div (created by SanityRoot)
    in SanityRoot
    in AppContainer
Sep 3, 2020, 1:04 PM
Minimal example:
Crashes:

import styled from 'styled-components';

const H2Style = styled.span`
  font-size: 2rem;
`;

export default {
  title: 'Rich Text Test',
  name: 'richTextTest',
  type: 'array',
  of: [
    {
      type: 'block',
      styles: [
        { title: 'MyTitle', value: 'h2', blockEditor: { render: H2Style } }
      ]
    }
  ]
};
Works:

import styled from 'styled-components';

const H2Style = styled.span`
  font-size: 2rem;
`;

export default {
  title: 'Rich Text Test',
  name: 'richTextTest',
  type: 'array',
  of: [
    {
      type: 'block',
      styles: [
        { title: 'MyTitle', value: 'h2', blockEditor: { render: props => props.children } }
      ]
    }
  ]
};
*edit: tried to clarify with new example
Sep 3, 2020, 1:08 PM
user M
friendly reminder 😊
Sep 7, 2020, 8:18 AM
Thanks Daniel, noted! If I’m understanding correctly, this only occurs when loading styled components? i.e. if you remove the import and what’s below, the error disappears?
Sep 7, 2020, 8:57 AM
Yep, that is correct! 🙂
Sep 7, 2020, 9:01 AM
Rewrote the example to clarify 🙂
Sep 7, 2020, 9:32 AM
That’s useful context, thanks! I’ll forward this to the team as it seems like a bug to me. Will keep you posted 🙂
Sep 7, 2020, 9:33 AM
Any update on this issue? 🙂
Sep 17, 2020, 7:07 AM
user M
Hi, any update on this?
Sep 22, 2020, 7:03 AM
Not yet, but it’s with the team. I expect us to have an update before the end of the week. (Sorry for being a bit slow to keep you posted)
Sep 22, 2020, 7:26 AM
user M
any update on this?
Oct 26, 2020, 7:14 AM
user Y
user M
Any update on this or should we make efforts to write us out of styled-components?
Nov 25, 2020, 7:58 AM
Hi Daniel! I understood that this was resolved - weren't you the person in touch with Benedicte about this error around mid-October? I resolved it with her and I believe she forwarded it at the time. Do let me know if you're not that person and I'll dig up the solution! 😄
Nov 25, 2020, 8:02 AM
Here's the solution I got working at the time:
import React from 'react'
import styled from 'styled-components'
const H2Style = styled.span`
  font-size: 2rem;
`
export default {
  title: 'Rich Text Test',
  name: 'richTextTest',
  type: 'array',
  of: [
    {
      type: 'block',
      styles: [
        { title: 'MyTitle', value: 'h2', blockEditor: { render: props => <H2Style>{props.children}</H2Style> } }
      ]
    }
  ]
}
Or if you think this is cleaner:

import React from 'react'
import styled from 'styled-components'
const H2Style = styled.span`
  font-size: 2rem;
`
const H2StyleRender = props => (
  <H2Style>{props.children}</H2Style>
)
export default {
  title: 'Rich Text Test',
  name: 'richTextTest',
  type: 'array',
  of: [
    {
      type: 'block',
      styles: [
        { title: 'MyTitle', value: 'h2', blockEditor: { render: H2StyleRender } }
      ]
    }
  ]
}

Nov 25, 2020, 8:04 AM
Hi Peter, thats right, Benedicte suggested this solution and I was super pumped, but I think we ended up experiencing some buggy behavior when we tried it out. I can do a new test and see if I missed something, or come back to you with a better report 🙂 Thanks for the suggestion!
Nov 25, 2020, 8:22 AM
Ah, sorry to hear it didn't end up working smoothly. Please do let me know if the issue persists so we can investigate further. Should be possible to get it to work with styled components 🙂
Nov 25, 2020, 8:31 AM
Looks like its working now Peter, thanks! Not sure what bug I was experiencing last time, but there seems to have been some changes with the blockEditor-render api which might have confused me. Anyway, thanks for the help 🎉
Dec 7, 2020, 11:36 AM
Great to hear, Daniel, thanks for confirming!
Dec 7, 2020, 11:57 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?