Почему не работают динамические импорты в функции?
В общем вопрос такой: Мне нужно импортить объекты, которые находятся в других файлах. Сейчас я импортнул все файлы сразу(в начале), мне же надо сделать это динамически, т.е нужно чтобы при открытии определённой страницы - импортился только один, определённый файл для этой страницы, а не всё сразу. Это у меня в конструкции 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() |
// сейчас я сделал статические импорты, но я хочу делать импорты по условию, т.е динамические 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()
Дополнительно:
Ответы:
Ошибка возникает из-за того, что нет переменной 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() |
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
Подробнее можно почитать здесь
- Мда, пх, я же так и пытался сделаль, просто забыл, что переменную можно объявить вне функции, и потом просто перезаписывать при каждом импорте
А я при каждом импорте делал let, и не понимал как там сделать правильно. Спасибо за подсказку*Ещё подсказали, что через require() можно, тоже забыл про него
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с динамическими импортами в функциях может возникать по нескольким причинам. Во-первых, динамические импорты могут не работать из-за неправильного пути к файлу или модулю, который вы пытаетесь импортировать. Убедитесь, что путь к файлу указан верно и файл действительно существует.
Кроме того, перед использованием динамического импорта убедитесь, что ваша среда поддерживает эту функциональность. Например, в некоторых версиях Node.js динамические импорты могут быть отключены по умолчанию. Убедитесь, что вы используете поддерживаемую версию среды выполнения.
Также стоит проверить, не возникают ли ошибки в процессе загрузки модуля. Например, если модуль содержит синтаксическую ошибку, динамический импорт может не выполниться. Проверьте консоль разработчика на наличие ошибок при загрузке модуля.
Для того чтобы убедиться, что проблема не связана с асинхронной загрузкой модуля, попробуйте использовать async/await или промисы для обработки динамического импорта. Например, вместо:
const module = await import('./module.js');
Вы можете попробовать:
import('./module.js').then(module => { // Ваш код здесь });
Если после всех этих шагов проблема с динамическими импортами все еще остается, возможно, стоит обратиться к документации вашего среды выполнения или сообществу разработчиков для получения дополнительной помощи.