Почему не работают динамические импорты в функции?

Question

[Danila232]

В общем вопрос такой: Мне нужно импортить объекты, которые находятся в других файлах. Сейчас я импортнул все файлы сразу(в начале), мне же надо сделать это динамически, т.е нужно чтобы при открытии определённой страницы - импортился только один, определённый файл для этой страницы, а не всё сразу. Это у меня в конструкции switch-case

Динамические импорты работают немного по другому, поэтому например я не могу написать в этой конструкции - import { translationList } from '/dist/js/languages/index_translate.js'. Нужно import('/dist/js/languages/index_translate.js');
А в этом файле у меня создан объект, и при таком импорте как я понял этот объект не прочитывается. Типо файл может и импортится, а вот объект в нём нет. Знаю что динам.импорты возвращают Promise, но я не придумал как мне с ним сделать так, чтоб заработало, подскажите пж
Ошибка(если юзать мой нынешний switch-case):
"Uncaught ReferenceError: translationList is not defined"

// сейчас я сделал статические импорты, но я хочу делать импорты по условию, т.е динамические
import { translationList } from '/dist/js/languages/index_translate.js';
import { translationList } from '/dist/js/languages/services_translate.js';

// Общие данные
const currentPath = document.location.pathname
let currentLang = localStorage.getItem('language') || 'ru'
const langButtons = document.querySelectorAll('[data-switch]')

// Тут должен быть Импорт нужного файла с переводом, в зависимости от открытой страницы, КАК сделать
// async function checkPageAdress(){

//     switch(currentPath){
//         case '/index.html':
//              import('/dist/js/languages/index_translate.js');
//             break
//         case '/services.html':
//              import('/dist/js/languages/services_translate.js');
//             break
//         default: 
//              import('/dist/js/languages/index_translate.js');
//     }

// }
// checkPageAdress()


langButtons.forEach((btn) => {btn.addEventListener('click', (event) => {

        currentLang = event.currentTarget.dataset.switch;
        localStorage.setItem('language', event.currentTarget.dataset.switch)

        langButtons.forEach(el => {
            el.classList.remove('language-active')
        })
        event.currentTarget.classList.add('language-active')


        changeLang()
    })
})


function changeLang(){
    for(let element in translationList){
        let siteElements = document.querySelectorAll(`[data-lang="${element}"]`)
        siteElements.forEach(text => {
            text.textContent = translationList[element][currentLang]
        })
    }
}
changeLang()

Answer 1

[LJ322]

Ошибка возникает из-за того, что нет переменной translationList. Объявите переменную и уже потом присваивайте ей объект модуля

let moduleObj;
async function checkPageAdress(){
     switch(currentPath){
         case '/index.html':
              moduleObj = await import('/dist/js/languages/index_translate.js');
             break
         case '/services.html':
              moduleObj = await import('/dist/js/languages/services_translate.js');
             break
         default: 
              moduleObj = await import('/dist/js/languages/index_translate.js');
     }

 }
 checkPageAdress()

К функции можете обращаться через moduleObj.translationList

Подробнее можно почитать здесь

Comments

[Danila232]

Мда, пх, я же так и пытался сделаль, просто забыл, что переменную можно объявить вне функции, и потом просто перезаписывать при каждом импорте
А я при каждом импорте делал let, и не понимал как там сделать правильно. Спасибо за подсказку

*Ещё подсказали, что через require() можно, тоже забыл про него