diff --git a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js index a93dda6ce11e8..d38ee7e68f61a 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js @@ -171,6 +171,18 @@ describe('ReactDOMFiber', () => { expect(firstNode.tagName).toBe('DIV'); }); + it('renders an empty fragment', () => { + const EmptyFragment = () => ; + + let instance = null; + ReactDOM.render(, container); + + expect(container.childNodes.length).toBe(0); + + const firstNode = ReactDOM.findDOMNode(instance); + expect(firstNode).toBe(null); + }); + let svgEls, htmlEls, mathEls; const expectSVG = {ref: el => svgEls.push(el)}; const expectHTML = {ref: el => htmlEls.push(el)}; diff --git a/packages/react-reconciler/src/ReactChildFiber.js b/packages/react-reconciler/src/ReactChildFiber.js index ae19577aa29c5..5276f750d421a 100644 --- a/packages/react-reconciler/src/ReactChildFiber.js +++ b/packages/react-reconciler/src/ReactChildFiber.js @@ -1215,6 +1215,15 @@ function ChildReconciler(shouldTrackSideEffects) { newChild.key === null ) { newChild = newChild.props.children; + + // In case of an empty fragment, this is undefined. Since we crash when + // undefined is reconciled, we replace this case with null. + if (typeof newChild === 'undefined') { + // The null declaration seems to change the `any` type of newChild for + // flow causing it to require a $$typeof property later. + // $FlowIssue + newChild = null; + } } // Handle object types