jsdom: Last release breaks the build when using it together with React DOM

Basically when using

<svg style={{ foo: 'bar' }} />

with React.

Basically the issue is that node.style is undefined now.

Just in case, this is my stack trace:

TypeError: Cannot set property 'height' of undefined
      at Object.setValueForStyles (node_modules/react-dom/lib/CSSPropertyOperations.js:195:26)
      at ReactDOMComponent._updateDOMProperties (node_modules/react-dom/lib/ReactDOMComponent.js:880:29)
      at ReactDOMComponent.mountComponent (node_modules/react-dom/lib/ReactDOMComponent.js:514:12)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
      at ReactDOMComponent.mountChildren (node_modules/react-dom/lib/ReactMultiChild.js:238:44)
      at ReactDOMComponent._createInitialChildren (node_modules/react-dom/lib/ReactDOMComponent.js:697:32)
      at ReactDOMComponent.mountComponent (node_modules/react-dom/lib/ReactDOMComponent.js:516:12)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
      at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
      at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
      at ReactDOMComponent.mountChildren (node_modules/react-dom/lib/ReactMultiChild.js:238:44)
      at ReactDOMComponent._createInitialChildren (node_modules/react-dom/lib/ReactDOMComponent.js:697:32)
      at ReactDOMComponent.mountComponent (node_modules/react-dom/lib/ReactDOMComponent.js:516:12)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
      at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
      at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
      at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
      at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
      at ReactDOMComponent.mountChildren (node_modules/react-dom/lib/ReactMultiChild.js:238:44)
      at ReactDOMComponent._createInitialChildren (node_modules/react-dom/lib/ReactDOMComponent.js:697:32)
      at ReactDOMComponent.mountComponent (node_modules/react-dom/lib/ReactDOMComponent.js:516:12)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
      at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
      at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
      at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
      at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
      at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
      at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
      at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
      at mountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:104:32)
      at ReactReconcileTransaction.perform (node_modules/react-dom/lib/Transaction.js:140:20)
      at batchedMountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:126:15)
      at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:140:20)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26)
      at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27)
      at Object._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:320:18)
      at Object._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:401:32)
      at Object.render (node_modules/react-dom/lib/ReactMount.js:422:23)
      at Object.renderIntoDocument (node_modules/react-dom/lib/ReactTestUtils.js:79:21)
      at renderWithOptions (node_modules/enzyme/build/react-compat.js:200:24)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:94:59)
      at mount (node_modules/enzyme/build/mount.js:19:10)

This is the code (transpiled) from the function that breaks in React DOM lib (see var style = node.style;):

setValueForStyles: function (node, styles, component) {
    if (process.env.NODE_ENV !== 'production') {
      ReactInstrumentation.debugTool.onHostOperation({
        instanceID: component._debugID,
        type: 'update styles',
        payload: styles
      });
    }

    var style = node.style;
    for (var styleName in styles) {
      if (!styles.hasOwnProperty(styleName)) {
        continue;
      }
      if (process.env.NODE_ENV !== 'production') {
        warnValidStyle(styleName, styles[styleName], component);
      }
      var styleValue = dangerousStyleValue(styleName, styles[styleName], component);
      if (styleName === 'float' || styleName === 'cssFloat') {
        styleName = styleFloatAccessor;
      }
      if (styleValue) {
        style[styleName] = styleValue;
      } else {
        var expansion = hasShorthandPropertyBug && CSSProperty.shorthandPropertyExpansions[styleName];
        if (expansion) {
          // Shorthand property that IE8 won't like unsetting, so unset each
          // component to placate it
          for (var individualStyleName in expansion) {
            style[individualStyleName] = '';
          }
        } else {
          style[styleName] = '';
        }
      }
    }

I am not sure if this is a bug from jsdom or a bug from react-dom, the thing is that the issue started to happen after last release.

Thanks for your help


Edit (thanks to @graingert):

Minimal reproduction case

https://runkit.com/graingert/59d64b929dc8c10012b8c118

How does similar code behave in browsers?

https://jsfiddle.net/wuv2kovb/1/

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 7
  • Comments: 18 (8 by maintainers)

Commits related to this issue

Most upvoted comments

closing, still investigating. I confirmed that the issue happened after updating to 11.3.0, using 11.2.0 is not giving me conflicts. If something new comes I will let you know. Thanks for your help