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

Question

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.

This gets run through a bundler? It might not be able to compute importStr properly. — MinusFour
– MinusFour, Commented Aug 20, 2021 at 22:38
That may be the reason. But how can I dynamically import 'react-icons/bi' or 'react-icons/fa' or any other subgroups of icons depending on the needs? — MichM
– MichM, Commented Aug 20, 2021 at 22:42
That will depend on your bundler, what are you using? Webpack? Rollup? Parcel? — MinusFour
– MinusFour, Commented Aug 20, 2021 at 22:44
I wonder what would happen if you wrap your import by function like function work(str) { import(str).then(console.log) } and then call it work(`react-icons/${g.toLowerCase()}`); — Eduard Jacko
– Eduard Jacko, Commented Aug 20, 2021 at 22:50

Eduard Jacko · Accepted Answer · 2021-08-21 00:51:07Z

2

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

edited Aug 21, 2021 at 0:51

answered Aug 21, 2021 at 0:04

Eduard Jacko

2,1611 gold badge19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kailash E · Accepted Answer · 2021-08-20 22:54:51Z

0

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>
  );
}

More info on React.lazy

answered Aug 20, 2021 at 22:54

Kailash E

1615 bronze badges

1 Comment

Eduard Jacko Over a year ago

I think his issue is dynamic import paths where he is not able to build path from variables.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related