При запуске приложения получаю ошибку Critical dependency, как исправить?

Question

[JadDy]

Получаю ошибку: "Critical dependency: the request of a dependency is an expression" при использовании динамического импорта файлов. Файл импортирую подобным образом

const loadStepScreen = async (elem: string) => {
    if (elem) {
      await import(`../screens/ModalScreens/${elem}.tsx`).then((importData) => {
        setStepScreen(() => {
          return importData.default;
        });
      })
    }
  };

В конфиге бабеля также добавил плагин - @babel/plugin-syntax-dynamic-import. В чём проблема так и не могу разобраться, если название файла статическое, то всё работает, в ином случае не пашет. Чистил кэш npm и переустанавливал node_modules по советам, но это также не помогло

Comments

[Михаил Р.]

Напишите код текстом, оформив его соответствующим тегом.

[JadDy]

Михаил Р., переделал

[Евгений]

Так это не работает. Если ты собираешь бандл с чанками (динамическими импортами) - бандлер должен точно знать, что это за чанки (имена файлов). Он не выполняет код, который ты написал, а просто работает с зависимостями, оптимизируя их.

Проще говоря, ты хочешь заставить его выполнить код, а не обработать.

Поэтому всё работает, если ты явно задаёшь импорт, а не формируешь его налету.

Без сборщиков - да, такое сработало бы.

[JadDy]

muscimolus, использовал подобный подход на одном из проектов, вполне себе работал, но там проект был создан через create-react-app, а на текущем используется свой самописный вебпак и на нём уже не работает. Возможно есть какие-то зависимости для него, но к сожаление нигде найти не могу

[Евгений]

JadDy, значит там было какое-то изощрение вокруг такого рода импортов.

Просто это противоречит логике, а почему - постарался выше описать.

Даже на твоём примере выше. Если, например, значение elem где-то объявлено в контексте выше или имеется какое-то дефолтное значение и в каком-то хуке ты вызываешь эту функцию, в нее да, передаётся значение, но даже в этом случае бандлер, возможно напилит тебе одну из возможных чанок и заменит тебе ссылку в импорте на статичную, именно на ссылку этой чанки. Но делать этого он не будет, потому что это сломает логику, поэтому ты видишь такое предупреждение.