javascriptreactjscode-splitting

react code splitting: is the argument for the import() function not a string

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.

Solution

  • 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')