[Bug] Minified React error #62: When adding Custom Properties > Style to List Item

[natepers]

Browser: Brave [Version 1.52.122 Chromium: 114.0.5735.110 (Official Build) (arm64)]
OS: macOS 13.4

Issue:
Adding a Custom Property "Style" to a List Item provokes the React Error below within the main section (Screenshot Attached)

Error:
Minified React error #62; visit https://reactjs.org/docs/error-decoder.html?invariant=62 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Project Link: https://apps.webstudio.is/builder/ddd28011-3992-4ec6-be6b-cf6df73f4a44?authToken=ccc457c7-47cf-43e6-b383-9e439dadc8f1&mode=preview

[natepers]

This bug appears to occur whenever 'Custom Properties > Style' is added to any element... project seems irrecoverable after this occurs.

[TrySound]

Does deleting List Item component and then reloading recover from error?

[natepers]

Yes, deleting the item and reloading eliminates the error but adding "Custom Properties > Style" to any item will break a project and make it uneditable.

[TrySound]

Great. We will remove style attribute in the next release. Local styles should be preferred way for styling.

[natepers]

For the record, as product designer and front end dev, I am not making any suggestion to remove a feature.

Honestly don't know what you're suggesting, how it would be beneficial, or how a "Local" style relates to "Custom Properties > Style" since I could not even test adding a style to an individual item at all and there is no feature with the label "Local Style/s".

I'll read the docs but as I said, I am not advocating for removing a feature... I was simply looking for a way to add a hook to an individual element as might be required in a front-end hot fix, or one of design implementation for a client.

[TrySound]

Local style is a default style source available on every stylable instance. You can find it in style panel.

Style attribute was added unintentionally. Ideally it should not be necessary. So we will remove to avoid such bug in the future.

[TrySound]

Local styles are practically the same as style attribute because allow to fix styles of specific instance without affecting anything else.

[kof]

We had some properties in the list that weren't actually properly supported, style is one of them. In theory, we could enable the user to set a style string just like the browser supports it through the CSSOM API element.style = 'color: red;' ... right now it was throwing an error because React doesn't support a string interface, so we would need to work around React to enable it.

I guess it could come up in the future as a necessary workaround for something, so long-term we should enable this, right now we are just patching up the completely broken canvas.

Let's create a separate issue. I think this should wait for our planned Linked CSS Editor UI, which could be used for both, CSS and inline styles, as a control UI right there in the props panel.

[kof]

fixed, please reopen if you still see it