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

I get an error when using TresCanvas. Like this .. ( onUnmounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can... ) #905

Open
5 tasks done
angrymusic opened this issue Jan 14, 2025 · 0 comments
Labels
bug Something isn't working

Comments

@angrymusic
Copy link

angrymusic commented Jan 14, 2025

Describe the bug

If you just add TresCanvas to your code, you will get the error.
[Vue warn]: onUnmounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

sample of stackblitz has same problem too.
스크린샷 2025-01-14 113418

An error occurs even if you only add TresCanvas to a vue project without anything.

App.vue

import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView />
</template>

<style scoped>

</style>

AboutView

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div class="canvas">
      <TresCanvas>
        <!-- Your scene here -->
      </TresCanvas>
    </div>
  </div>
</template>
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
</script>
<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
.canvas {
  width: 100px;
  height: 100px;
}
</style>

Reproduction

https://stackblitz.com/edit/tresjs-minimal-reproduction

Steps to reproduce

No response

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (8) x64 13th Gen Intel(R) Core(TM) i7-1355U
    Memory: 1.70 GB / 7.76 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    npm: 11.0.0 - ~/.nvm/versions/node/v20.18.0/bin/npm
  npmPackages:
    @tresjs/cientos: ^4.0.3 => 4.0.3 
    @tresjs/core: ^4.3.2 => 4.3.2 
    vite: ~6.0.6 => 6.0.6

Used Package Manager

npm

Code of Conduct

@alvarosabu alvarosabu added the bug Something isn't working label Jan 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
Status: No status
Development

No branches or pull requests

2 participants