This is very bizarre. During my attempt at code-splitting, I encountered this:
const g = "bi";
const importStr = `react-icons/${g.toLowerCase()}`;
console.log(importStr);
console.log(importStr === `react-icons/bi`);
import(importStr).then(module => {
console.log(module);
});
import(`react-icons/bi`).then(module => {
console.log(module);
});
In the above code, if I import "importStr", then the import throws an error:
Uncaught (in promise) Error: Cannot find module 'react-icons/bi'
But if I directly import "react-icons/bi", then there is no issue. As you see,
importStr === `react-icons/bi`
Why and how do I fix this? I can't actually directly use "react-icons/bi" because g is dynamic and could take other values.
I quote from the following comment
Webpack performs a static analyse at build time. It doesn't try to infer variables which that import(test) could be anything, hence the failure. It is also the case for import(path+"a.js").
Because of the tree shaking feature webpack tries to remove all unused code from the bundle. That also means something similar could work
import("react-icons/" + g)
Edit: as per your suggestion I updating this to
import("react-icons/" + g.toLowerCase()+ '/index.js')
An easy way to implement code splitting in React is with lazy loading, as seen here (this might be easier than importing a dynamic string):
const OtherComponent = React.lazy(() => import('./OtherComponent'));
This implementation will load the bundle with OtherComponent only when it is first rendered.
Example from reactjs.org:
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<section>
<OtherComponent />
<AnotherComponent />
</section>
</Suspense>
</div>
);
}