41

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

enter image description here

ItamarG3
  • 4,092
  • 6
  • 31
  • 44
Bhumi Thakkar
  • 411
  • 1
  • 4
  • 3

6 Answers6

25

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

enter image description here

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.

Fyodor Yemelyanenko
  • 11,264
  • 1
  • 30
  • 38
18

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.

Yaroslav
  • 181
  • 2
3

In my RN Expo Web application I was getting this error while doing something like

style={{ padding: 5, ...props.style }}

enter image description here

I Realized that passing prop named "style" and then using it as inline style was causing this error. What resolved it for me was using a different name for the prop and doing something like ...

style={{ padding: 5, ...props.listSectionStyle }}

Merely changing prop name from 'style' to anything else like 'listSectionStyle' (or any of your choice) should resolve if it is due to above stated reason.

Ref: link shared by Fyodor in his reply helped understand the real issue.

Maneesh Parihar
  • 1,395
  • 2
  • 8
  • 6
  • In my case, also for an RN Web Expo project, the issue was using `styled()` on an imported component that was already styled. Doing the inheritance within the same file doesn't cause an error. I suspect that when they are in separate files it uses a string to set the style prop, which is the issue you link to. – blwinters Jul 27 '21 at 21:03
2

For Expo/RN

You're probably giving an array of malformed stylesheets this way:

<compo style={[foo, biz, bar]} />

What you need to do is flatten your stylesheets:

import * as Native from 'react-native';

<compo style={Native.StyleSheet.flatten([foo, biz, bar])} />
Alexandre Daubricourt
  • 3,323
  • 1
  • 34
  • 33
0

I was getting this error with prime ng's <p-skeleton>. What I was doing is passing a style directly to the skeleton like below:

<p-skeleton width="97.5%" height="20rem" style="margin-bottom: 2rem;"></p-skeleton>

So instead of using style directly I used the class property to give the margin bottom (my class was already defined). This removed the error for me. And updated line is as follows:

<p-skeleton width="97.5%" height="20rem" borderRadius="16px" class="mb-40"></p-skeleton>
Wahab Shah
  • 2,066
  • 1
  • 14
  • 19
0

I got the same error in Next.js . I used style={style.cardImg } instead of className= {style.cardImg}

So, replace style={} by className={}

SATYAM RAJ
  • 1
  • 1