Ошибка загрузки файлов в проекте с использованием разбиения кода в Webpack с помощью динамического импорта ()

Question

Я использую динамический импорт Webpack для отложенной загрузки файлов с разделением кода и использую магические комментарии Webpack . Когда я пытаюсь загрузить файлы в производство, я получаю следующую ошибку:

Я имел в виду эту страницу веб-пакета . Вот мой код Я не дохожу до «ресурсов», так как файлы не загружаются. Я попытался жестко закодировать имя файла, и затем импорт работает, но не используя динамический $ {locale}. $ {locale} выходит из строки имени файла, но не может импортировать файл. Я использую веб-пакет версии 3.8.1:

async function getLang(locale){
      await import(
        /* webpackInclude: /\.json$/ */ 
        /* webpackChunkName: "locales/[request]" */ 
        /* webpackMode: "lazy" */ 
      `../../locales/${locale}.json`)
      .then(
        resources => new promise((resolve, reject){
          // do something with resources
        })
      ) 
    } 
}

Карта разделения кода находится в локалях lazy /^/.*> .json $ file, и они должны загрузить соответствующий файл в папку locales, например. фр-fr.json. Вот как выглядит структура рабочей папки:

static
     js
       locales
         - de-de.json
         - fr-fr.json
        locales /^/.*
          .json$
        locales lazy /^/.*
          .json$ .         <--- file where above error occurs

Буду очень признателен за любой совет, как это исправить. Спасибо