Issue with styled-components causing crashes in blockEditor-rendering
11 replies
Last updated: Sep 22, 2020
Q
Just upgraded from
1.149.x->
1.150.5and 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
Q
The ‘Desk’ tool crashedRetry
Show details
Stack trace:
Component stack:
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>
Sep 3, 2020, 1:04 PM
Q
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
Q
Minimal example:
Crashes:
Works:
*edit: tried to clarify with new 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 } } ] } ] };
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 } } ] } ] };
Sep 3, 2020, 1:08 PM
Q
user M
friendly reminder 😊Sep 7, 2020, 8:18 AM
M
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
Q
Yep, that is correct! 🙂
Sep 7, 2020, 9:01 AM
Q
Rewrote the example to clarify 🙂
Sep 7, 2020, 9:32 AM
M
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
D
Any update on this issue? 🙂
Sep 17, 2020, 7:07 AM
D
user M
Hi, any update on this?Sep 22, 2020, 7:03 AM
P
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
Sanity– build remarkable experiences at scale
The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.