Как правильно использовать динамический импорт?

Question

[Solevoy_2015]

Появилась необходимость динамически импортировать компоненты, и отображать их через провайдер. Но импорт напрочь отказывается находить модуль по пути из переменной

const getScreen = async () => {
        if (!screen || screens.length == 0) return setComponent(null)
        const currentScreen = screens.find(element => element.name === screen)
        if (currentScreen.url) {
//not work currentScreen.url=`../Screen/About/s_about`
            const result = await import(`${currentScreen.url}`);
//work
 const result = await import(`../Screen/About/s_about`);

            setComponent(() => result.default)
        }
    }

По задумке путь к модулю будет уникальным. В компоненте используются другие компоненты импортируемые с помощью React.Lazy, вдруг это поможет с ответом.

Comments

[Михаил Р.]

Какой сборщик?

[Solevoy_2015]

Что такое сборщик?)

Answer 1

[Aetae]

Приложение собирается сборщиком. Все импорты обрабатываются на стадии сборки, и на стадии сборки же включаются в бандл(основной js файл).
Если вы указываете переменную в пути - это значит только то, что в бандл будут включены ВСЕ файлы находящиеся по такому пути.
Никакие новые файлы(отсутствующие при сборке) уже собранное приложение грузить через import не будет.

Нужна загрузка новых файлов по url? Придётся делать всё руками по-старинке.

Нужна загрузка таки уже имеющихся? Уточняйте путь до минимального:

import(`../Screen/About/${currentScreen.name}.jsx`);

И помните, что в бандле будет ВСЁ по маске `../Screen/About/*.jsx`.
Хоть какое-то уточнение стартового пути необходимо, потому что иначе сборщик бы собрал в бандл вообще все файлы на вашем компьютере, что, думаю, не желаемое поведение.

Возможно что-то поменялось для сборки через vite(т.к. он пользуется модулями), но тут не подскажу.