Using TresJS with Astro : [Vue warn]: onUnmounted is called when there is no active component instance to be associated with...

[pmhn]

Describe the bug

Ran into this issue when trying to integrate TresJS in my Astro project. To verify that it wasn't me doing something stupid, I switched to Alvaro's tres-astro repository from the "How to add 3D to Astro using TresJS" video. I'm running into the same warning there. I also upgraded to the latest astro in the tres-astro repository, but still seeing the same error. As far as I can tell, the 3D model does show up.

Removing the TheExperience component and just trying to use TresCanvas also triggers the same warning.

(index):224  [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.

Call Stack as shown in Edge

Method		File
warn$1	@	runtime-core.esm-bundler.js:51
injectHook	@	runtime-core.esm-bundler.js:2808
(anonymous)	@	runtime-core.esm-bundler.js:2815
yr	@	tres.js:831
_r	@	tres.js:889
(anonymous)	@	tres.js:1058
(anonymous)	@	index.mjs:71
trigger	@	index.mjs:71
c	@	tres.js:944
setTimeout
c	@	tres.js:944
wr	@	tres.js:949
yt	@	tres.js:972
br	@	tres.js:1056
(anonymous)	@	tres.js:1638
(anonymous)	@	runtime-core.esm-bundler.js:2815
callWithErrorHandling	@	runtime-core.esm-bundler.js:199
callWithAsyncErrorHandling	@	runtime-core.esm-bundler.js:206
hook.__weh.hook.__weh	@	runtime-core.esm-bundler.js:2795
flushPostFlushCbs	@	runtime-core.esm-bundler.js:385
hydrate2	@	runtime-core.esm-bundler.js:1675
mount	@	runtime-core.esm-bundler.js:3939
app.mount	@	runtime-dom.esm-bundler.js:1786
(anonymous)	@	client.js:45
await in (anonymous)
(anonymous)	@	(index):224
e	@	(index):224
await in e
start	@	(index):224
childrenConnectedCallback	@	(index):224
await in childrenConnectedCallback
e	@	(index):224
(anonymous)	@	(index):224

Reproduction

https://github.com/alvarosabu/tres-astro

Steps to reproduce

Clone the repository
rm the package-lock.json file
npm install
npm run dev

System Info

npx envinfo --system --npmPackages '{vite,@tresjs/*,three,vue,@astrojs/*}' --binaries
 --browsers --npmGlobalPackages '{astro}'

  System:
    OS: Windows 11 10.0.22631
    CPU: (28) x64 Intel(R) Core(TM) i7-14700K
    Memory: 40.84 GB / 63.77 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.4.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @astrojs/mdx: ^3.1.4 => 3.1.9
    @astrojs/rss: ^4.0.7 => 4.0.10
    @astrojs/sitemap: ^3.1.6 => 3.2.1
    @astrojs/vue: ^4.5.0 => 4.5.3
    @tresjs/cientos: ^4.0.0 => 4.0.3
    @tresjs/core: ^4.2.7 => 4.3.1
    three: ^0.167.1 => 0.167.1
    vue: ^3.4.38 => 3.5.13

Used Package Manager

npm

Code of Conduct

• I agree to follow this project's Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.