динамический импорт reactjs с постоянной переменной пути

Я столкнулся со странной проблемой при использовании динамического импорта reactjs. Допустим, у меня есть компонент, имя которого ComponentA, а путь похож на myComponents/ComponentA. Теперь, когда я динамически импортирую его, как следующий код, он будет работать хорошо:

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

Но если я определяю путь к своему компоненту в постоянной переменной, например:

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

это дало бы мне такую ​​​​ошибку:

Ошибка: не удается найти модуль «myComponents/ComponentA».

И иногда, если я просто добавляю пустую строку в свою переменную PATH, проблема решается, а иногда нет.

//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(....);

любая идея о том, что происходит, будет оценена.


webpack reactjs javascript dynamic-import
person pouyan    schedule 31.12.2017    source источник
comment
Сделайте путь к модулю относительным.   -  person sepehr    schedule 05.04.2019
comment
Удалось ли вам найти способ обойти это?   -  person Mike K    schedule 28.01.2021
comment
@MikeK, это было давно, и я не нашел для этого решения. Насколько я помню, я нашел способ достичь своей главной цели. К сожалению, из-за того, что это было давно, и сейчас я работаю с vuejs, я ничего не помню об этом :(.   -  person pouyan    schedule 28.01.2021

Ответы (2)


arrow_upward
1
arrow_downward

Возможно, попробуйте этот новый синтаксис ES6:

const PATH = 'myComponents/ComponentA';
Promise.all(
    [
       import(`${PATH}`), // try pass it like this
       // other imports
    ]
 ).then(....);
person toufek khoury    schedule 31.12.2017
comment
ты пробовал обратные кавычки? мы можем попробовать это с таким пробелом import(' ${PATH}') (обратные кавычки вокруг ${PATH} не могут сделать это в комментарии) - person toufek khoury; 04.01.2018
comment
Извините за поздний ответ, но это тоже не сработало :(. - person pouyan; 06.01.2018

arrow_upward
1
arrow_downward

У вас должна быть, по крайней мере, начальная литеральная строка папки (без переменной), чтобы ограничить, какие модули могут быть загружены, потому что она будет объединять все возможные файлы.

Это ограничение веб-пакета. Подробнее см. https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import

Очень жаль, что он не распознает const, кроме литералов.

person rejetto    schedule 27.08.2020