Tresjs
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... )
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.
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
- [X] I agree to follow this project's Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] The provided reproduction is a minimal reproducible example of the bug.
@alvarosabu
Looking at the call stack here, the warning originates in useRaycaster.
#844 – the new events system – doesn't use useRaycaster. Running #844 locally, the warning isn't reported, even after merging current main.
I've linked this issue to #844 so that it'll be closed when #844 is merged.
