-
Notifications
You must be signed in to change notification settings - Fork 391
Open
Description
Describe the bug
Implementing the globe component on nuxtjs like this
// component/TestGlobe.vue
<template>
<section class="bg-black text-white">
<div ref="globeDiv"></div>
</section>
</template>
<script setup lang="ts">
import Globe from 'globe.gl'
const globeDiv = ref(null)
onMounted(() => {
if (!globeDiv.value) return
const myGlobe = new Globe(globeDiv.value)
myGlobe.globeImageUrl(
'//unpkg.com/three-globe/example/img/earth-night.jpg'
)
})
</script>and render the component on client side using <ClientOnly> component
// pages/index,vue
<script setup lang="ts">
import TestGlobe from '@/components/TestGlobe.vue'
</script>
<template>
<div>
<ClientOnly fallback-tag="div">
<TestGlobe />
</ClientOnly>
</div>
</template>It will show me this error:
TypeError cannot read properties of undefined (reading 'VERTEX')
To Reproduce
Steps to reproduce the behavior:
- Create a Nuxt application npx nuxi@latest init
- Install packages and add
npm i globe.gl - create a "pages" directory and "components" directory
- Insert the snippet above
You can refer based on this file
NuxtAppFile.zip
Expected behavior
That no error is thrown and the globe is renders correctly in my phone browser.
Screenshots
Smartphone (please complete the following information):
- Device: Samsung Galaxy A22G
- OS: Android 13
- Browser: Chrome
- Version: 143.0.7499.146
Additional context
this is my package json
{
"name": "test",
"type": "module",
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"@nuxt/image": "^2.0.0",
"@nuxt/ui": "^4.1.0",
"globe.gl": "^2.45.0",
"nuxt": "^4.2.1",
"vue": "^3.5.24",
"vue-router": "^4.6.3"
}
}Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels


