Failed to set an indexed property on 'CSSStyleDeclaration': Index property setter is not supported

Question

I am getting above error in my react project when chrome version is updated to 74 (latest version).

Answer 1

The root cause of this issue is described here. Essentially this happens when you pass style property of some elemnt as string or array. Like style="string" or style={[array]}. This may seem not relevant (I don't think that someone intentionally try to send string or Array to style property), but in my case this was root cause.

To find error I recommend to carefully investigate your code with debugger in Chrome or other browser.

Below is example of my error

I erroniously set styles.radioButton (which is used as value for style property for some element) using spread operator ...spacing.xxSmall, but spacing.xxSmall is just a string and spreaded to array with chars as array members. Previously properties with indexes (0, 1, 2, ...) of style has been ignored, but now site is crushed.

Answer 2

I work with Angular libraries and some of them does not support inline styles now (for me it was ngx-avatar and it not working on Firefox and chrome: 74)

before:

<ngx-avatar style="border-radius="50%"></ngx-avatar>

after:

<ngx-avatar [style.border-radius]="'50%'"></ngx-avatar>

I think you can try the same for React.