<p dir="auto">JSX code for me that works on Node 5.11 is failing with Node 6. It appears to be a problem with the Acorn module Webpack is relying on.</p>
<blockquote>
<p dir="auto">ERROR in ./src/index.js<br>
Module parse failed: c:\code\app\src\index.js Unexpected token (17:2)<br>
You may need an appropriate loader to handle this file type.<br>
SyntaxError: Unexpected token (17:2)<br>
at Parser.pp.raise (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:920:13)<br>
at Parser.pp.unexpected (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:1483:8)<br>
at Parser.pp.parseExprAtom (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:330:12)<br>
at Parser.pp.parseExprSubscripts (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:225:19)<br>
at Parser.pp.parseMaybeUnary (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:204:17)<br>
at Parser.pp.parseExprOps (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:151:19)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="at Parser.pp.parseMaybeConditional (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:133:19)
at Parser.pp.parseMaybeAssign (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:110:19)
at Parser.pp.parseExprList (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:657:23)
at Parser.pp.parseSubscripts (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:249:29)"><pre class="notranslate"><code class="notranslate">at Parser.pp.parseMaybeConditional (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:133:19)
at Parser.pp.parseMaybeAssign (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:110:19)
at Parser.pp.parseExprList (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:657:23)
at Parser.pp.parseSubscripts (C:\code\canopy-app\node_modules\webpack\node_modules\acorn\dist\acorn.js:249:29)
</code></pre></div>
<p dir="auto">@ multi main</p>
</blockquote>
<p dir="auto">Extra info:</p>
<p dir="auto">Webpack version: 1.13.0</p>
<p dir="auto">Referenced Acorn version within Webpack's node_modules: 3.1.0</p>
<p dir="auto">Chunk of code the parser is choking on:</p>
<p dir="auto"><code class="notranslate">render( &lt;Root /&gt;, document.getElementById('root') );</code></p>
<p dir="auto">It seems to just choke on basic JSX syntax. However, if I downgrade Node back to 5.11 it works as it should.</p>
<p dir="auto">In reference to <a href="https://github.com/webpack/webpack/issues/9802#issuecomment-696014390" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/9802/hovercard">this</a></p>
<h2 dir="auto">Current behavior</h2>
<p dir="auto">Same module found in multiple chunks</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/13101565/93846566-c0c4f680-fce7-11ea-9a11-1f3ac87af119.png"><img width="1792" alt="Screen Shot 2020-09-22 at 3 24 44 pm" src="https://user-images.githubusercontent.com/13101565/93846566-c0c4f680-fce7-11ea-9a11-1f3ac87af119.png" style="max-width: 100%;"></a></p>
<h2 dir="auto">Steps to reproduce:</h2>
<p dir="auto"><a href="https://github.com/mustafawm/wp-splitchunks-issue">This repo</a></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="npm i
npm run build"><pre class="notranslate"><code class="notranslate">npm i
npm run build
</code></pre></div>
<p dir="auto"><code class="notranslate">&lt;Map /&gt;</code> is used in different places (lazy-loaded in some).</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// App.tsx
const AuthenticatedApp = lazyLoad(() =&gt; import('./Authenticated'));
const UnAuthenticatedApp = lazyLoad(() =&gt; import('./UnAuthenticated'));

export default function AppRoutes() {
  const random = Math.random() * 10;

  // if authed
  if (random &lt; 6) {
    return &lt;AuthenticatedApp /&gt;;
  }
  return &lt;UnAuthenticatedApp /&gt;;
}"><pre class="notranslate"><span class="pl-c">// App.tsx</span>
<span class="pl-k">const</span> <span class="pl-v">AuthenticatedApp</span> <span class="pl-c1">=</span> <span class="pl-en">lazyLoad</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'./Authenticated'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">UnAuthenticatedApp</span> <span class="pl-c1">=</span> <span class="pl-en">lazyLoad</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'./UnAuthenticated'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">function</span> <span class="pl-v">AppRoutes</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">random</span> <span class="pl-c1">=</span> <span class="pl-v">Math</span><span class="pl-kos">.</span><span class="pl-en">random</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">*</span> <span class="pl-c1">10</span><span class="pl-kos">;</span>

  <span class="pl-c">// if authed</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">random</span> <span class="pl-c1">&lt;</span> <span class="pl-c1">6</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-v">AuthenticatedApp</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
  <span class="pl-k">return</span> <span class="pl-c1">&lt;</span><span class="pl-v">UnAuthenticatedApp</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// Authenticated.tsx
const MapUsed1 = lazyLoad(() =&gt; import('app/MapUsed1'));
const MapUsed2 = lazyLoad(() =&gt; import('app/MapUsed2'));

export default function AuthenticatedRoutes() {
  return (
    &lt;Routes&gt;
      &lt;Route path=&quot;profile&quot; element={&lt;MapUsed1 /&gt;} /&gt;
      &lt;Route path=&quot;send&quot; element={&lt;MapUsed2 /&gt;} /&gt;
    &lt;/Routes&gt;
  );
}"><pre class="notranslate"><span class="pl-c">// Authenticated.tsx</span>
<span class="pl-k">const</span> <span class="pl-v">MapUsed1</span> <span class="pl-c1">=</span> <span class="pl-en">lazyLoad</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'app/MapUsed1'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-v">MapUsed2</span> <span class="pl-c1">=</span> <span class="pl-en">lazyLoad</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-s">'app/MapUsed2'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">function</span> <span class="pl-v">AuthenticatedRoutes</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">Routes</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">Route</span> <span class="pl-c1">path</span><span class="pl-c1">=</span><span class="pl-s">"profile"</span> <span class="pl-c1">element</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">&lt;</span><span class="pl-v">MapUsed1</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">Route</span> <span class="pl-c1">path</span><span class="pl-c1">=</span><span class="pl-s">"send"</span> <span class="pl-c1">element</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">&lt;</span><span class="pl-v">MapUsed2</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Routes</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// UnAuthed.tsx
export default function UnauthenticatedRoutes() {
  return (
      &lt;Routes&gt;
        &lt;Route path=&quot;signup&quot; element={&lt;MapUsed3 /&gt;} /&gt;
      &lt;/Routes&gt;
  );
}"><pre class="notranslate"><span class="pl-c">// UnAuthed.tsx</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">function</span> <span class="pl-v">UnauthenticatedRoutes</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">Routes</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">Route</span> <span class="pl-c1">path</span><span class="pl-c1">=</span><span class="pl-s">"signup"</span> <span class="pl-c1">element</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">&lt;</span><span class="pl-ent">MapUsed3</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span><span class="pl-kos">}</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Routes</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">one chunk containing <code class="notranslate">leaflet</code></p>
<p dir="auto">webpack version:  5.0.0-rc.0<br>
Node.js version: 14.7.0<br>
Operating System:  MacOS</p>
<p dir="auto"><em>Sorry if the repo is not very well-organized. I stripped out the codebase I'm working on to get a reproduceable repo.</em></p>