Skip to content

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
@angrymusic

Description

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

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    • Status

      No status

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions