Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot read properties of null (reading 'offsetWidth') #381

Open
jimhucksly opened this issue Apr 12, 2022 · 7 comments
Open

Cannot read properties of null (reading 'offsetWidth') #381

jimhucksly opened this issue Apr 12, 2022 · 7 comments
Labels

Comments

@jimhucksly
Copy link

jimhucksly commented Apr 12, 2022

Vue3 + Nuxt 3

<yandex-map  
            :settings="settings"  
             :coords="[-58.435104, -34.615689]"  
            :zoom="4"  
            :controls="['zoomControl']"  
   />
settings = {
    apiKey: '....',
    lang: 'ru_RU',
    coordorder: 'latlong',
    enterprise: false,
    version: '2.1'
  }

Uncaught TypeError: Cannot read properties of null (reading 'offsetWidth')

@eduardmavliutov
Copy link

@jimhucksly получилось решить проблему? У меня Vue 2 + Nuxt Bridge, аналогичная ошибка возникает при запуске прод-сборки, в дев-режиме все нормально.

@vserdobintsev
Copy link

vserdobintsev commented Jun 27, 2022

В общем, тоже стал гуглить эту ошибку. Заходил к вам на огонёк, но решением выступает костыль. Нужно через v-if по-умолчанию скрывать карту, а в mounted её отображать. Вот вам коммент, который ссылкой ведёт на ответ из другого вопроса. Впрочем, код примитивный и уже по описанию всё должно быть понятно.

@elzodxon
Copy link

Actually, I imported components locally and settings as well . It works fine:)

@san8k
Copy link

san8k commented Nov 6, 2022

это мне помогло:
<YandexMap v-if="showMap" ...>

const showMap = ref(false);
onMounted(() => {
  setTimeout(() => {
    showMap.value = true;
  }, 50);
});

@sattor1
Copy link

sattor1 commented Jan 9, 2023

есть новости ?
вышенаписанный код не помогает

@BoRonin
Copy link

BoRonin commented Apr 21, 2023

это мне помогло: <YandexMap v-if="showMap" ...>

const showMap = ref(false);
onMounted(() => {
  setTimeout(() => {
    showMap.value = true;
  }, 50);
});

Время таймаута должно быть больше времени page transition, если он у вас есть. Т.е. карта должна грузиться после конца анимации.
Либо в конфиге ставить pageTransition: false

@daniluk4000 daniluk4000 added the bug label Mar 5, 2024
@Amalthea-code
Copy link

Amalthea-code commented May 23, 2024

Одним из основных способов решения вопроса будет это инициализация карты только на стороне клиента, всеми возможными способами.
Рекомендуемый вариант обернуть в

<no-ssr>
    <div id='my-map'></div>
    
    
    <yandex-map  
            :settings="settings"  
             :coords="[-58.435104, -34.615689]"  
            :zoom="4"  
            :controls="['zoomControl']"  
   />
</no-ssr>

Причина в том что yandex maps пытается получить offsetWidth у элемента на котором он инициализируется, а offsetWidth существует только в браузере у элементов, а на стороне сервера подобные данные не возможно получить.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

9 participants