title: importing images doesn't work properly in react + parcel + typescript + module esnext
body: <h1>Reproductive example repo</h1>
  
  <p><a href="https://github.com/github0013/module_esnext_import_image" rel="nofollow noreferrer">module_esnext_import_image</a></p>
  
  <h1>How to reproduce</h1>
  
  <pre class="lang- prettyprint-override"><code>git clone https://github.com/github0013/module_esnext_import_image.git
  cd module_esnext_import_image
  yarn
  yarn run src/index.html
  </code></pre>
  
  <p>then, look inside the <code>dist</code> folder.  You should see something like <code>src.7753e686.png</code> instead of <code>1.some-random-id.png</code> (a file name starts with <code>1</code>).</p>
  
  <p><a href="https://i.stack.imgur.com/0R5uR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0R5uR.png" alt="src.7753e686.png"></a></p>
  
  <p>Since the image I am importing is <code>1.png</code>, the filename should be also starting with <code>1</code> so that the image will link from <code>index.html</code>.   However, because the generated image file in the <code>dist</code> starts with <code>src</code>, the image link breaks.</p>
  
  <p>I did a lot changes in codes, to find the core of this problem, and it seems like this happens when </p>
  
  <ol>
  <li>tsconfig.json compilerOptions -> "module": "esnext"</li>
  <li>react-loadable is used</li>
  <li>image is imported in the loaded component</li>
  </ol>
  
  <p>If I change tsconfig.json compilerOptions -> "module": "<code>commonjs</code>", then it seems to work fine.   </p>
  
  <p>I would like to know if anybody has an idea why this is happening.</p>