Loading Errors in Nuxt

[markus-gx]

Describe the bug Implementing in a Nuxt environment the like this:

<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(() => {
  const myGlobe = Globe()
  myGlobe(globeDiv.value).globeImageUrl(
    '//unpkg.com/three-globe/example/img/earth-night.jpg'
  )
})
</script>

results in an error:

The requested module '@tweenjs/tween.js' does not provide an export named 'default'", "stack": "<pre><span class=\"stack internal\">at ModuleJob._instantiate (node:internal/modules/esm/module_job:127:21)</span>\n<span class=\"stack internal\">at async ModuleJob.run (node:internal/modules/esm/module_job:193:5)</span>\n<span class=\"stack\">at async Promise.all (index 0)</span>\n<span class=\"stack internal\">at async ESMLoader.import (node:internal/modules/esm/loader:337:24)</span>\n<span class=\"stack internal\">at async ViteNodeRunner.interopedImport (./node_modules/vite-node/dist/client.mjs:347:28)</span>\n<span class=\"stack internal\">at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:238:24)</span>\n<span class=\"stack\">at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:186:14)</span>\n<span class=\"stack internal\">at async ViteNodeRunner.dependencyRequest (./node_modules/vite-node/dist/client.mjs:221:12)</span>\n<span class=\"stack internal\">at async ./node_modules/globe.gl/dist/globe.gl.mjs:3:31</span>\n<span class=\"stack internal\">at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:328:5)</span></pre>"

To Reproduce Steps to reproduce the behavior:

1. Create a Nuxt application npx nuxi@latest init <project-name>
2. Install packages and add yarn add globe.gl
3. create a "pages" directory
4. Insert the snippet above

Expected behavior That no error is thrown and the globe is renders correctly.

Screenshots

[markus-gx]

Thank you for the quick fix @vasturiano ! But sadly it is still not working. With HMR it loads (so you fix worked quite a bit) but when I refresh the page or build the project the exact same error is appearing.

The requested module '@tweenjs/tween.js' does not provide an export named 'default'", "stack": "<pre><span class=\"stack internal\">at ModuleJob._instantiate (node:internal/modules/esm/module_job:127:21)</span>\n<span class=\"stack internal\">at async ModuleJob.run (node:internal/modules/esm/module_job:193:5)</span>\n<span class=\"stack\">at async Promise.all (index 0)</span>\n<span class=\"stack internal\">at async ESMLoader.import (node:internal/modules/esm/loader:337:24)</span>\n<span class=\"stack internal\">at async ViteNodeRunner.interopedImport (./node_modules/vite-node/dist/client.mjs:347:28)</span>\n<span class=\"stack internal\">at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:238:24)</span>\n<span class=\"stack\">at async ViteNodeRunner.cachedRequest (./node_modules/vite-node/dist/client.mjs:186:14)</span>\n<span class=\"stack internal\">at async ViteNodeRunner.dependencyRequest (./node_modules/vite-node/dist/client.mjs:221:12)</span>\n<span class=\"stack\">at async ./src/components/organisms/IntroTeaser.client.vue:4:31</span>\n<span class=\"stack internal\">at async ViteNodeRunner.directRequest (./node_modules/vite-node/dist/client.mjs:328:5)</span></pre>

[vasturiano]

@markus-gx could you check if you have multiple versions of @tweenjs/tween.js in your dependency tree? That could be the reason for this error. If so, please try to deduplicate them.