<p dir="auto">Getting the following error upon loading:<br>
<code class="notranslate">Uncaught SyntaxError: Duplicate data property in object literal not allowed in strict mode -- From line ... in .../bundle.js</code></p>
<p dir="auto">App runs well in modern browsers on PC/Mac, iOS UIWebview, mobile Safari, Android (also 4.x) Chrome, and Android &gt;5.x.</p>
<p dir="auto">Consulting <a href="http://kangax.github.io/compat-table/es5/#android44" rel="nofollow">this table</a> shows Android 4.4 supports ES5 well and should run React.js applications just fine.</p>
<p dir="auto">Any ideas?</p>
<p dir="auto">React / ReactDOM: 16.4.2</p>
<p dir="auto">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 <code class="notranslate">Fragment</code> in a few places, like so:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;React.Fragment&gt;
    &lt;div&gt;Child 1-1&lt;/div&gt;
    &lt;div&gt;Child 1-2&lt;/div&gt;
&lt;/React.Fragment&gt;
&lt;React.Fragment&gt;
    &lt;div&gt;Child 2-1&lt;/div&gt;
    &lt;div&gt;Child 2-2&lt;/div&gt;
&lt;/React.Fragment&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-v">Fragment</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>Child 1-1<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>Child 1-2<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-v">Fragment</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Fragment</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>Child 2-1<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-s1">div</span><span class="pl-c1">&gt;</span><span class="pl-v">Child</span> <span class="pl-c1">2</span><span class="pl-c1">-</span><span class="pl-c1">2</span><span class="pl-c1">&lt;</span><span class="pl-pds"><span class="pl-c1">/</span>div&gt;</span><span class="pl-c1"></span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span>React.Fragment&gt;</pre></div>
<p dir="auto">In everything but Internet Explorer, this renders as you'd expect:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div&gt;Child 1-1&lt;/div&gt;
&lt;div&gt;Child 1-2&lt;/div&gt;
&lt;div&gt;Child 2-1&lt;/div&gt;
&lt;div&gt;Child 2-2&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>Child 1-1<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>Child 1-2<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>Child 2-1<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>Child 2-2<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">However, for some reason in Internet Explorer 11, these are being rendered as some weird tags:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;jscomp_symbol_react.fragment16&gt;
    &lt;div&gt;Child 1-1&lt;/div&gt;
    &lt;div&gt;Child 1-2&lt;/div&gt;
&lt;/jscomp_symbol_react.fragment16&gt;
&lt;jscomp_symbol_react.fragment16&gt;
    &lt;div&gt;Child 2-1&lt;/div&gt;
    &lt;div&gt;Child 2-2&lt;/div&gt;
&lt;/jscomp_symbol_react.fragment16&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-s1">jscomp_symbol_react</span><span class="pl-kos">.</span><span class="pl-s1">fragment16</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>Child 1-1<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>Child 1-2<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-s1">jscomp_symbol_react</span><span class="pl-kos">.</span><span class="pl-s1">fragment16</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-s1">jscomp_symbol_react</span><span class="pl-kos">.</span><span class="pl-c1">fragment16</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>Child 2-1<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-s1">div</span><span class="pl-c1">&gt;</span><span class="pl-v">Child</span> <span class="pl-c1">2</span><span class="pl-c1">-</span><span class="pl-c1">2</span><span class="pl-c1">&lt;</span><span class="pl-pds"><span class="pl-c1">/</span>div&gt;</span><span class="pl-c1"></span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span>jscomp_symbol_react.fragment16&gt;</pre></div>
<p dir="auto">I've tried pausing the code at the transpiled <code class="notranslate">_react.createElement(_react.Fragment)</code> line, and the <code class="notranslate">_react.Fragment</code> export is a string with the same name as the tag (<code class="notranslate">jscomp_symbol_react.fragment16</code>). 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.</p>
<p dir="auto">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.</p>
<p dir="auto">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.</p>