Skip to content

Render error on nuxtjs using phone browser #261

@audi-wu

Description

@audi-wu

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:

  1. Create a Nuxt application npx nuxi@latest init
  2. Install packages and add npm i globe.gl
  3. create a "pages" directory and "components" directory
  4. 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

Image
Image
Image

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"
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions