reactjs dynamic import with constant path variable

Question

I faced with a weird problem while using reactjs dynamic import. Let's say I have a component which it's name is ComponentA and it's path is like myComponents/ComponentA. Now when I dynamically import it like the following code, it would work well:

Promise.all(
        [
            import('myComponents/ComponentA'),
            // other imports
        ]
    ).then(....);

But if I define my component path in a constant variable like the following :

//before definition of my current component
const PATH = 'myComponents/ComponentA';
.
.
.
// some where in my component class
Promise.all(
    [
        import(PATH),
        // other imports
    ]
).then(....);

it would give me an error like this:

Error: Cannot find module 'myComponents/ComponentA'.

And some times if I just add an empty string to my PATH variable would solve the problem and some times it doesn't.

//before definition of my current component
const PATH = 'myComponents/ComponentA';
.
.
.
// some where in my component class
Promise.all(
    [
       import(''+PATH), // some times by adding empty string, problem would be solved
       // other imports
    ]
 ).then(....);

any idea about what is going on would be appreciated.

@MikeK, it's for a long ago and I didn't found a solution for it. As I remember I found a way to achieve my main goal. Unfortunately because it is for a long time a go and now a day I am working with vuejs, I don't remember anything a bout it :(. — pouyan
– pouyan, Commented Jan 28, 2021 at 10:03

sepehr · Accepted Answer · 2019-04-05 19:28:01Z

1

Maybe try this new ES6 syntax:

const PATH = 'myComponents/ComponentA';
Promise.all(
    [
       import(`${PATH}`), // try pass it like this
       // other imports
    ]
 ).then(....);

edited Apr 5, 2019 at 19:28

sepehr

18.7k7 gold badges87 silver badges120 bronze badges

answered Dec 31, 2017 at 12:05

toufek khoury

3,3742 gold badges10 silver badges15 bronze badges

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

2 Comments

toufek khoury Over a year ago

did you try the backticks ? we can try it with space like this import(' ${PATH}') (backticks around ${PATH} cant do that in a comment)

pouyan Over a year ago

Sorry for my late respond, but this didn't work too :(.

rejetto · Accepted Answer · 2020-08-27 10:08:48Z

1

You have at least to have an initial literal folder string (no variable) to restrict what modules can be loaded, because it will bundle all possible files.

This is a limit of webpack. For details see https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import

It is truly a pity it doesn't recognize the const other than literals.

answered Aug 27, 2020 at 10:08

rejetto

1061 silver badge3 bronze badges

Collectives™ on Stack Overflow

reactjs dynamic import with constant path variable

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related