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?
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 7
- Comments: 18 (8 by maintainers)
Commits related to this issue
- implement SVG elements, fices #2001 — committed to caub/jsdom by caub 7 years ago
- implement SVG elements, fixes #2001 — committed to caub/jsdom by caub 7 years ago
- test: fix package and jsdom for travis-ci https://github.com/tmpvar/jsdom/issues/2001 — committed to sugarcrm/sucrose by deleted user 7 years ago
- A better SVG implementation Closes #1445 by superceding it; also supercedes #1946. Fixes #1423. Fixes #1528. Fixes #1938. Fixes #2001. Includes only the <svg> element, but this brings along with it... — committed to TimothyGu/jsdom by TimothyGu 7 years ago
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