Fragments in IE11 rendered as strange elements

React / ReactDOM: 16.4.2

I’m having trouble reproducing this, but I’m raising it in the hope that someone can give me some clues as to the cause. I have a large application which is using Fragment in a few places, like so:

<React.Fragment>
    <div>Child 1-1</div>
    <div>Child 1-2</div>
</React.Fragment>
<React.Fragment>
    <div>Child 2-1</div>
    <div>Child 2-2</div>
</React.Fragment>

In everything but Internet Explorer, this renders as you’d expect:

<div>Child 1-1</div>
<div>Child 1-2</div>
<div>Child 2-1</div>
<div>Child 2-2</div>

However, for some reason in Internet Explorer 11, these are being rendered as some weird tags:

<jscomp_symbol_react.fragment16>
    <div>Child 1-1</div>
    <div>Child 1-2</div>
</jscomp_symbol_react.fragment16>
<jscomp_symbol_react.fragment16>
    <div>Child 2-1</div>
    <div>Child 2-2</div>
</jscomp_symbol_react.fragment16>

I’ve tried pausing the code at the transpiled _react.createElement(_react.Fragment) line, and the _react.Fragment export is a string with the same name as the tag (jscomp_symbol_react.fragment16). I think this is just the correct way in which the symbol polyfill works and that React should recognize it as something other than an HTML tag.

What’s even weirder is that this only happens sometimes. If two components in my app are using fragments, the first one to render may have the above issue, the second may not. If an affected component re-renders, the rendered DOM will be corrected. I haven’t found a solid pattern to this yet.

I have a fairly typical webpack + babel setup, and using the babel-polyfill for symbol support. I’m really not sure what parts of my setup are relevant to this so please let me know if you need any extra info. Again, I’m trying to create a reproduction outside of my application but if anyone can offer me some clues in the meantime I’d be incredibly grateful.

[Shenlok]

Seems to be an issue with the Symbol polyfill implementation from the Closure compiler, see Sam Saccone’s tweet

[Shenlok]

As @sanniassin pointed out, the Google Maps polyfill is causing Symbol() to return strings. There are various places in the React code that check the typeof an element’s type, and often checking for string types before checking for the REACT_FRAGMENT_TYPE ‘Symbol’ e.g here