React: Regression: setValueForStyles throws in Chrome 74 and Firefox 66.

[ericlaw1979]

CSS standards have changed, meaning that CSSStyleDeclaration's indexer property does not have a setter. This leads to a script error in setValueForStyles around
https://github.com/facebook/react/blob/21d5f7d32d5becf5c8e986ff0202059be643dc15/packages/react-dom/src/shared/CSSPropertyOperations.js#L82.

This was reported to Chrome as https://crbug.com/951046 and resolved as by-design. Note: This issue is effectively a duplicate of #11895, but I don't think I have permission to reopen that issue to provide more information.

REPRO 1: Visit http://plumbandbath.co.uk/
OBSERVE: Full error page with stack trace.

REPRO 2:
(1) Visit https://skylifepro.com/#
(2) Click Login button at top right

EXPECT: Login html appears
OBSERVE: No login feature, script errors in console.

Uncaught TypeError: Failed to set an indexed property on 'CSSStyleDeclaration': Index property setter is not supported.
at Object.setValueForStyles (homepage.js?t=1543226156:28)
at m._updateDOMProperties (homepage.js?t=1543226156:29)
at mountComponent (homepage.js?t=1543226156:29)
at Object.mountComponent (homepage.js?t=1543226156:4)
at c.performInitialMount (homepage.js?t=1543226156:29)
at c.mountComponent (homepage.js?t=1543226156:29)
at Object.mountComponent (homepage.js?t=1543226156:4)
at mountChildren (homepage.js?t=1543226156:30)
at m._createInitialChildren (homepage.js?t=1543226156:29)

[sebmarkbage]

This is not really a supported pattern in React DOM and this code is probably broken or a noop already.

I believe this happens because in React _Native_ it is possible to use this pattern to combine styles:

<div style={[{width: 100}, {height: 200}]} />

However, in React DOM that just passes through as a noop (by setting the indexed properties). We should add an actionable warning if we detect this. Effectively, this isn't allowed so making it an error whether it is from React or the browser seems fine.

Unfortunately, from a browser compat perspective that doesn't really help because that doesn't magically fix the code that's already out there (and some of these use older major versions of React).

[alexchen1875]

yep,i get it when upgrade chrome to 74

chrome ver:

[cemirk]

This is not really a supported pattern in React DOM and this code is probably broken or a noop already.

I believe this happens because in React _Native_ it is possible to use this pattern to combine styles:

<div style={[{width: 100}, {height: 200}]} />

However, in React DOM that just passes through as a noop (by setting the indexed properties). We should add an actionable warning if we detect this. Effectively, this isn't allowed so making it an error whether it is from React or the browser seems fine.

Unfortunately, from a browser compat perspective that doesn't really help because that doesn't magically fix the code that's already out there (and some of these use older major versions of React).

It worked for me.

[sncer]

This error is not caused by React DOM or browsers, you should check the properties of style are correct or not. The properties of style must be legal, and the numebr type of properties (indexed properties) will result in this error, such as:
<div style={{0:100}} />

[alexchen1875]

This is not really a supported pattern in React DOM and this code is probably broken or a noop already.
I believe this happens because in React _Native_ it is possible to use this pattern to combine styles:

<div style={[{width: 100}, {height: 200}]} />

However, in React DOM that just passes through as a noop (by setting the indexed properties). We should add an actionable warning if we detect this. Effectively, this isn't allowed so making it an error whether it is from React or the browser seems fine.
Unfortunately, from a browser compat perspective that doesn't really help because that doesn't magically fix the code that's already out there (and some of these use older major versions of React).

It worked for me.

yep,! worked for me .
```
change
[dataSource.length && 'height']: minHeight,
}}>

to :
const style={height:minHeight};

````
it's worked!!

[adnanfajlur]

it breaks on production

[pat12345]

I am trying to upload a comment here but it is not showing one of the line(line 5).So i am attaching my comment.
please see attached file.
commentGithubReact.txt

[topwood]

it breaks on production too

[pat12345]

yes- that is right.

[pat12345]

update a treebeard version and do npm install.
below link will resolve issue.
https://github.com/storybooks/react-treebeard/issues/193

[rafaelfreaner]

Is there a solution for this issue? I'm running into the same errors, working on an application that includes many react native components, then using react-native-web that makes it possible to run React Native components and APIs on the web using React DOM. Unfortunately, we do pass an array of style objects to these react native components. Does this mean I need to completely update all of the styles in this application? Is there another solution for this?

[gaearon]

using react-native-web that makes it possible to run React Native components and APIs on the web using React DOM. Unfortunately, we do pass an array of style objects to these react native components. Does this mean I need to completely update all of the styles in this application?

Please report it to react-native-web if you use it — I don't know for sure how its API is different and whether they intended to support style arrays. If they did then maybe RNW could fix this case on their side.

[gaearon]

TLDR:

• This happens when you do style="string" or style={[array]} which is not, and has never been supported. (And it never worked in React.)
• React passes your input styles directly to the DOM style API. The broken styles don't originate in React, they come from your application code.
• Unfortunately, browsers shipped a change to the DOM style API which broke some websites.
• We can't work around this in React without performance regressions, and this wouldn't fix broken websites anyway — so please fix this in your code.

---

I'm going to close this.

The error is real, but it's not caused by React. You happen to be hitting it through React, but the error itself caused by passing an array or a string to the style prop. React just assigns the properties of the DOM style API that you specified, and in this case those properties are incorrect (0, 1, 2, etc, are not real CSS style properties).

I want to emphasize API like style="string" or style={[a, b]} was never supported by React DOM. You won't see it in the docs and it also never worked (those styles didn't get applied). So if you relied on this, you were relying on accidental behavior that wasn't really ever working before either.

In the past it happened to fail silently. The browser behavior has changed so that it fails with an error. This is really unfortunate, and I'm sorry you're running into this. However, on the React side nothing changed — we pass your input to DOM style API just like we used to.

In theory, React could add a try/catch there to prevent this crash. However, this won't fix the already broken websites (which were broken due to the browser behavior change). And if you're going to have to update React anyway, you might as well fix the problem at its source — by fixing your style.

The downside of working around this in React with a try/catch or type validation is that it would both make all React style access slower (as we'd have to do it in every single case). It would also not protect us from further similar changes to browser APIs. So that seems like a very high cost that doesn't even buy us much.

For those reasons, I don't think this is actionable for us, and I think we can close it.

[kabarakh]

Hey Team,

if you are not allowed to use style="" anymore, please change the documentation at least (https://reactjs.org/docs/dom-elements.html#style)

[mgol]

@kabarakh The URL you linked to already states:

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string.

What else do you need?

[Ivaylo1987]

Something worth mentioning for those using react-native and react-native-web.

As this is true:

I want to emphasize API like style="string" or style={[a, b]} was never supported by React DOM.

On the React Native docs styles this is also true:

You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles.

So if you use arrays in react-native and use react-native-web you are very likely to experience the same error - as we did in our storybook for web :)

Happy Coding :)

[udfalkso]

Just FYI for those hitting this issue with react native web. In my case it was caused by using a style=[{}]} array on an

[ziaulrehman40]

Hey @udfalkso I am facing same issue in react-native-web.
Can you please explain a bit more about how you narrowed it down to which component is causing issue, because react-native-web officially supports the array type input(see: https://github.com/necolas/react-native-web/blob/master/docs/guides/style.md#using-styles). So i guess it might be some external library not playing well with react-native-web.

PS: I am in a process to convert my existing RN(officially unsupported version by react-native-web 0.59.9) app to RN-web.

[udfalkso]

@ziaulrehman40 It was a bit of trial and error really. I suggest you look into which components (likely via some external library) you're using that don't map to normal RN primitives (view -> div, etc.). In my case it was an element that was causing the trouble. There was nothing there doing the array -> object mapping for me in that scenario so it broke. Maybe even do a "view source" and look for non-standard html elements in the markup?

[ziaulrehman40]

Yeah, it is actually trial and error, for us it was a third party component which didn't support array style input.