title: react code splitting: is the argument for the import() function not a string
body: <p>This is very bizarre. During my attempt at code-splitting, I encountered this:</p>
  <pre><code>const g = &quot;bi&quot;;
  const importStr = `react-icons/${g.toLowerCase()}`;
  console.log(importStr);
  console.log(importStr === `react-icons/bi`);
  
  import(importStr).then(module =&gt; {
      console.log(module);
  });
  
  
  
  import(`react-icons/bi`).then(module =&gt; {
      console.log(module);
  
  });
  </code></pre>
  <p>In the above code, if I import &quot;importStr&quot;, then the import throws an error:</p>
  <blockquote>
  <p>Uncaught (in promise) Error: Cannot find module 'react-icons/bi'</p>
  </blockquote>
  <p>But if I directly import &quot;react-icons/bi&quot;, then there is no issue. As you see,</p>
  <pre><code>importStr === `react-icons/bi`
  </code></pre>
  <p>Why and how do I fix this? I can't actually directly use &quot;react-icons/bi&quot; because g is dynamic and could take other values.</p>