React: TypeError: CSS2Properties doesn’t have an indexed property setter for ‘0’ - Firefox Quantum

[codeuniquely]

React v16.2.0
ReactDom V 16.2.0

Report a bug

Any component that uses inline styles, fails in Firefox Quantum 57.0.1 (64 Bit)

const styled = Object.assign({}, {
   width: `${percent}%`,
});

<div className="progress-bar">
  <div className="bar" style={styled} />
</div>

If you only use classNames - then everything works as expected - (even wrapping the styles in an Object.assign - as shown above, does not fix this issue)

The code fails in React.Dom in the following function:

function setValueForStyles(node, styles, getStack) {
  var style = node.style;
  for (var styleName in styles) {
    if (!styles.hasOwnProperty(styleName)) {
      continue;
    }
    var isCustomProperty = styleName.indexOf('--') === 0;
    {
      if (!isCustomProperty) {
        warnValidStyle$1(styleName, styles[styleName], getStack);
      }
    }
    var styleValue = dangerousStyleValue(styleName, styles[styleName], isCustomProperty);
    if (styleName === 'float') {
      styleName = 'cssFloat';
    }
    if (isCustomProperty) {
      style.setProperty(styleName, styleValue);
    } else {
      style[styleName] = styleValue;
    }
  }
}

If you inspect the line

style.setProperty(styleName, styleValue);

then style name and styleValue are fine (matching the values passed in)

however if you inspect the line

style[styleName] = styleValue;

Then styleName here is undefined

Also if you inspect the line

var styleValue = dangerousStyleValue(styleName, styles[styleName], isCustomProperty);

The first argument styleName is absolutely fine (and contains values) - but if you look at the second argument styles[styleName] then styleName here is undefined...

Quantum is clearly doing something screwy - but basically any React app run in quantum curreblt breaks.

Quantum's console - exception output

webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:12727:7
setInitialDOMProperties
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:13780:7
setInitialProperties$1
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:13984:3
finalizeInitialChildren
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:14989:5
completeWork
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:8648:19
completeUnitOfWork
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:10132:18
performUnitOfWork
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:10234:14
workLoop
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:10288:26
callCallback
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:542:9
invokeGuardedCallbackDev
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:581:7
invokeGuardedCallback
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:438:5
renderRoot
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:10366:7
performWorkOnRoot
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:11014:24
performWork
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:10967:7
requestWork
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:10878:7
scheduleWorkImpl
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:10732:11
scheduleWork
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:10689:12
scheduleTopLevelUpdate
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:11193:5
updateContainer
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:11231:7
renderSubtreeIntoContainer/<
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:15226:7
unbatchedUpdates
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:11102:12
renderSubtreeIntoContainer
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:15225:5
render
webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:15290:12
<a

I would expect the function to work o Quantum as it does on Chrome, Safari, Edge

It looks like a Quantum issue in some why, but can the function be coded so check in some way or look for CSS2Property or whatever it needs to write a style like width directly

[aweary]

@codeuniquely I tried reproducing this with this JSFiddle in Firefox 57.0.1 on macOS but it seems to work fine? Could you please provide a runnable example that reproduces the error? You can use this JSFiddle as a template.

Assuming the error is reproducible, it would be better to report this as a bug in Bugzilla.

[codeuniquely]

@aweary. I looked at the JSFiddle you set up. There are a couple of things about it that I don't understand about it.

• The fiddle does not use React 16.2.0 (It seems to be running a version of 0.14.3) and using styles directly on elements prior to 16.2 works (because our app works on prior React versions before we started using 16.2)
• The JSFiddle you put up, does not at any point try attach an object to a JSX element using the style property - so does not appear to test the error described above.

Not sure how I proceed to build a demonstrable JSFiddle specifically running React V16.2.0

Any Advice ?

[aweary]

@codeuniquely I'm not sure what you're looking at, but both of those JSFiddles are running 16.2.0.

The JSFiddle you put up, does not at any point try attach an object to a JSX element using the style property - so does not appear to test the error described above.

The first link I posted does exactly that.

JSFiddle attempting to reproduce this issue: https://jsfiddle.net/635xL825/
Empty JSFiddle you can use as a starting point: https://jsfiddle.net/Luktwrdm/

[codeuniquely]

Issue was being caused by a react.CloneComponent() call in another class file (not related to the progress bar in any way at all - and never rendered on the same page as a progress bar)

I rewrote the other glass (GridTile) and this removed the issues with setting styles={} in Quantum ....

[djbobbydrake]

I'm still encountering this issue on my end. Can you give some more insights on your fix @codeuniquely

[gedesutarsa]

I have the same problem like this on my application. after digging up, firefox console, my conclusion the error came from library react-dom method : setValueForStyles
code is :

function setValueForStyles(node, styles, getStack) { var style = node.style; for (var styleName in styles) { // next code is removed
It's seem some of my code, or 3rd party library pass null as argument for node.style. so for temporary solution , I add null checking for this code, become like this:
function setValueForStyles(node, styles, getStack) { var style = node.style; if ( style ) { style = {} ; } for (var styleName in styles) {
and also at .min version(i still do it by hand, don't know to build minfied version with simple way).

[skant09]

Here is a update fiddle which reproduces the issue on firefox quantum.
https://jsfiddle.net/surya_persevere/u8ynpe9q/

[nearwood]

@skant09 That reproduces the issue for me. FF 65.0b2. I am unable to pause on exceptions, or set breakpoints to catch this and determine what style is causing it in my app, however. It crashes my entire browser. This looks to be a FF issue.

[BiosBoy]

The same problem. Any solution yet?

[oktorakevinarigi]

After I debug I found the problem here.
image

And I deleted the following coding and all the way smoothly,
image

[gaearon]

See https://github.com/facebook/react/issues/15375#issuecomment-490701560