<p dir="auto">Generally, when using babel / <code class="notranslate">babel-loader</code> it is common to ignore <code class="notranslate">node_modules</code> for faster compilation speed.</p>
<p dir="auto">The definition of the <code class="notranslate">$$typeof</code> attribute we're looking for is:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var REACT_ELEMENT_TYPE = typeof Symbol === 'function' &amp;&amp; Symbol['for'] &amp;&amp; 
                         Symbol['for']('react.element') || 0xeac7;"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-c1">REACT_ELEMENT_TYPE</span> <span class="pl-c1">=</span> <span class="pl-k">typeof</span> <span class="pl-v">Symbol</span> <span class="pl-c1">===</span> <span class="pl-s">'function'</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-v">Symbol</span><span class="pl-kos">[</span><span class="pl-s">'for'</span><span class="pl-kos">]</span> <span class="pl-c1">&amp;&amp;</span> 
                         <span class="pl-v">Symbol</span><span class="pl-kos">[</span><span class="pl-s">'for'</span><span class="pl-kos">]</span><span class="pl-kos">(</span><span class="pl-s">'react.element'</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> <span class="pl-c1">0xeac7</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">And this is pushed into a shared module that exports it when using the <code class="notranslate">react.inlineElements</code> transform.</p>
<p dir="auto">Here's the problem:</p>
<p dir="auto">On older browsers that don't support <code class="notranslate">Symbol</code>, like Safari 7 / Chromium 30, <code class="notranslate">Symbol</code> is polyfilled by the core-js runtime. But the same definition of <code class="notranslate">REACT_ELEMENT_TYPE</code> is present inside <code class="notranslate">node_modules/react/lib/ReactElement.js</code>, and this is <em>not</em> polyfilled by oore-js and therefore equals <code class="notranslate">0xeac7</code>.</p>
<p dir="auto">This causes the element test to fail on render (comparing a shimmed Symbol to <code class="notranslate">0xeac7</code>) and breaks the render on those browsers.</p>
<p dir="auto">I propose, rather than redefining <code class="notranslate">REACT_ELEMENT_TYPE</code> directly so it can be used in the inline elements (and thus having it break if upstream ever changes it), let's just instantiate an element and export its <code class="notranslate">$$typeof</code>.</p>
<p dir="auto">I am using 6to5 with jsx, gulp and browserify. After several file changes 6to5 crashes with error: <code class="notranslate">FATAL ERROR: JS Allocation failed - process out of memory</code>. I've found out that the problem is with my jsx source by simply switching entry point to js file instead jsx. See the console trace and my configuration below. Pay attention on increasing build time after each bundle change.</p>
<p dir="auto"><strong>Tested with the latest 6to5-core</strong></p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="[20:08:04] Running 'bundle'...
[20:08:05] Finished 'bundle' in 73 ms
[BS] File changed: build/app.js
[20:08:10] Running 'bundle'...
[20:08:11] Finished 'bundle' in 88 ms
[BS] File changed: build/app.js
[20:08:13] Running 'bundle'...
[20:08:14] Finished 'bundle' in 367 ms
[BS] File changed: build/app.js
[20:08:18] Running 'bundle'...
[20:08:36] Finished 'bundle' in 17 s
[BS] File changed: build/app.js
[20:08:42] Running 'bundle'...
FATAL ERROR: JS Allocation failed - process out of memory
[1]    23299 abort      gulp"><pre class="notranslate">[20:08:04] Running <span class="pl-s"><span class="pl-pds">'</span>bundle<span class="pl-pds">'</span></span>...
[20:08:05] Finished <span class="pl-s"><span class="pl-pds">'</span>bundle<span class="pl-pds">'</span></span> <span class="pl-k">in</span> 73 ms
[BS] File changed: build/app.js
[20:08:10] Running <span class="pl-s"><span class="pl-pds">'</span>bundle<span class="pl-pds">'</span></span>...
[20:08:11] Finished <span class="pl-s"><span class="pl-pds">'</span>bundle<span class="pl-pds">'</span></span> <span class="pl-k">in</span> 88 ms
[BS] File changed: build/app.js
[20:08:13] Running <span class="pl-s"><span class="pl-pds">'</span>bundle<span class="pl-pds">'</span></span>...
[20:08:14] Finished <span class="pl-s"><span class="pl-pds">'</span>bundle<span class="pl-pds">'</span></span> <span class="pl-k">in</span> 367 ms
[BS] File changed: build/app.js
[20:08:18] Running <span class="pl-s"><span class="pl-pds">'</span>bundle<span class="pl-pds">'</span></span>...
[20:08:36] Finished <span class="pl-s"><span class="pl-pds">'</span>bundle<span class="pl-pds">'</span></span> <span class="pl-k">in</span> 17 s
[BS] File changed: build/app.js
[20:08:42] Running <span class="pl-s"><span class="pl-pds">'</span>bundle<span class="pl-pds">'</span></span>...
FATAL ERROR: JS Allocation failed - process out of memory
[1]    23299 abort      gulp</pre></div>
<p dir="auto">Browserify Gulp task:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var browserify   = require('browserify');
var watchify     = require('watchify');
var bundleLogger = require('../util/bundleLogger');
var gulp         = require('gulp');
var handleErrors = require('../util/handleErrors');
var source       = require('vinyl-source-stream');
var _6to5        = require('./6to5ify');
var externalLibs = require('../external-libs');

gulp.task('browserify', function() {

    var bundler = browserify({
    cache: {}, packageCache: {}, fullPaths: true,
        entries: ['./src/scripts/test_app.jsx'],
        extensions: ['.js', '.jsx'],
        debug: false, 
    paths: ['./src/scripts'],
    fast: true,
    detectGlobals: false
    });


  var bundle = function() {
    bundleLogger.start();

    return bundler
      .external(externalLibs)
      .transform(_6to5)
      .bundle()
      .on('error', handleErrors)
      .pipe(source('app.js'))
      .pipe(gulp.dest('./build/'))
      .on('end', bundleLogger.end);

    if(global.isWatching) {
                bundler = watchify(bundler);
        bundler.on('update', bundle);
    }

    return bundle();
});"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">browserify</span>   <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'browserify'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">watchify</span>     <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'watchify'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">bundleLogger</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'../util/bundleLogger'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">gulp</span>         <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'gulp'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">handleErrors</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'../util/handleErrors'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">source</span>       <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'vinyl-source-stream'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">_6to5</span>        <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'./6to5ify'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">externalLibs</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'../external-libs'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-s1">gulp</span><span class="pl-kos">.</span><span class="pl-c1">task</span><span class="pl-kos">(</span><span class="pl-s">'browserify'</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

    <span class="pl-k">var</span> <span class="pl-s1">bundler</span> <span class="pl-c1">=</span> <span class="pl-s1">browserify</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">cache</span>: <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">packageCache</span>: <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">fullPaths</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
        <span class="pl-c1">entries</span>: <span class="pl-kos">[</span><span class="pl-s">'./src/scripts/test_app.jsx'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-c1">extensions</span>: <span class="pl-kos">[</span><span class="pl-s">'.js'</span><span class="pl-kos">,</span> <span class="pl-s">'.jsx'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-c1">debug</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span> 
    <span class="pl-c1">paths</span>: <span class="pl-kos">[</span><span class="pl-s">'./src/scripts'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">fast</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
    <span class="pl-c1">detectGlobals</span>: <span class="pl-c1">false</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>


  <span class="pl-k">var</span> <span class="pl-en">bundle</span> <span class="pl-c1">=</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">bundleLogger</span><span class="pl-kos">.</span><span class="pl-en">start</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">return</span> <span class="pl-s1">bundler</span>
      <span class="pl-kos">.</span><span class="pl-en">external</span><span class="pl-kos">(</span><span class="pl-s1">externalLibs</span><span class="pl-kos">)</span>
      <span class="pl-kos">.</span><span class="pl-en">transform</span><span class="pl-kos">(</span><span class="pl-s1">_6to5</span><span class="pl-kos">)</span>
      <span class="pl-kos">.</span><span class="pl-en">bundle</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
      <span class="pl-kos">.</span><span class="pl-en">on</span><span class="pl-kos">(</span><span class="pl-s">'error'</span><span class="pl-kos">,</span> <span class="pl-s1">handleErrors</span><span class="pl-kos">)</span>
      <span class="pl-kos">.</span><span class="pl-en">pipe</span><span class="pl-kos">(</span><span class="pl-s1">source</span><span class="pl-kos">(</span><span class="pl-s">'app.js'</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
      <span class="pl-kos">.</span><span class="pl-en">pipe</span><span class="pl-kos">(</span><span class="pl-s1">gulp</span><span class="pl-kos">.</span><span class="pl-en">dest</span><span class="pl-kos">(</span><span class="pl-s">'./build/'</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
      <span class="pl-kos">.</span><span class="pl-en">on</span><span class="pl-kos">(</span><span class="pl-s">'end'</span><span class="pl-kos">,</span> <span class="pl-s1">bundleLogger</span><span class="pl-kos">.</span><span class="pl-c1">end</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">if</span><span class="pl-kos">(</span><span class="pl-s1">global</span><span class="pl-kos">.</span><span class="pl-c1">isWatching</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
                <span class="pl-s1">bundler</span> <span class="pl-c1">=</span> <span class="pl-s1">watchify</span><span class="pl-kos">(</span><span class="pl-s1">bundler</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-s1">bundler</span><span class="pl-kos">.</span><span class="pl-en">on</span><span class="pl-kos">(</span><span class="pl-s">'update'</span><span class="pl-kos">,</span> <span class="pl-en">bundle</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-k">return</span> <span class="pl-en">bundle</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">test_app.jsx:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var React = require('react');

var Test = React.createClass({

  render: function() {
    return (
      &lt;h1&gt;Test&lt;/h1&gt;
    );
  }

});

React.render(&lt;Test /&gt;, document.getElementById('root'));
"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-v">React</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'react'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">var</span> <span class="pl-v">Test</span> <span class="pl-c1">=</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">createClass</span><span class="pl-kos">(</span><span class="pl-kos">{</span>

  <span class="pl-en">render</span>: <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>Test<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h1</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-v">Test</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">,</span> <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">'root'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>