Blank Canvas when navigating between two pages that have a TresCanvas

[T-Mike]

Describe the bug

TresJS scene does not display when you navigate between two pages that have a <TresCanvas>

When the current page has a <TresCanvas> and you navigate to another page that has a <TresCanvas>, new page displays a blank canvas.
When the current page does not have a <TresCanvas> and you navigate to another page that has a <TresCanvas>, new page works as expected.

Same behaviour on latest Chromium and Firefox.
Only Firefox outputs a warning: "WebGL Context lost"

Reproduction

https://stackblitz.com/edit/nuxt-starter-tg1cya

Steps to reproduce

Create a nuxt Project.
Add a "pages" folder to enable routing.
Inside "pages" folder, add 3 .vue files. On two of them, add a TresCanvas with a basic scene inside.
Then navigate between the pages to experience the bug.

On my reproduction, just use the three links to navigate between pages.
Home does not have a <TresCanvas>
Page1 and Page2 have a <TresCanvas>

System Info

@tresjs/nuxt 1.1.7
nuxt 3.7.4

Used Package Manager

yarn

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.

[markus-gx]

Have you resolved this issue?
I am currently facing it too.

     "nuxt": "^3.7.4",
    "@tresjs/cientos": "^3.5.0",
    "@tresjs/core": "^3.3.0",
    "@tresjs/nuxt": "^1.2.0",
    "@tresjs/post-processing": "^0.4.0",

#edit

Solved with a neat hack 🤣
When using useState the key must be unique across your canvas instances.

const mountedFix = useState(`mounted-fix-${props.blok._uid}`, () => false)
onMounted(() => {
  mountedFix.value = true
})
onUnmounted(() => {
  mountedFix.value = false
})

@alvarosabu we don't have access to @trejs/core right?
It seems that it can be solved in the TresCanvas instance coming from /core. Maybe this helps somehow.

[alvarosabu]

Hey there, @T-Mike @markus-gx did you guys tried out latest version v1.2.0?

Daniel and I made some changes that might solve this issue, I had it too in the playground and now it works.

Could you please update and try again to see if it works?

[markus-gx]

Hey there, @T-Mike @markus-gx did you guys tried out latest version v1.2.0?

Daniel and I made some changes that might solve this issue, I had it too in the playground and now it works.

Could you please update and try again to see if it works?

Sadly not. Already on the latest version.

     "nuxt": "^3.7.4",
    "@tresjs/cientos": "^3.5.0",
    "@tresjs/core": "^3.3.0",
    "@tresjs/nuxt": "^1.2.0",
    "@tresjs/post-processing": "^0.4.0",

[T-Mike]

I confirm, problem still here with version 1.2.0

[alvarosabu]

Yep it's reproducible, I will investigate further. Its weird because the playground its done with Nuxt module and works. 😅

https://playground.tresjs.org/

[alvarosabu]

@T-Mike could you confirm if this still happens in v2?

[T-Mike]

Yes still happens. https://stackblitz.com/edit/nuxt-starter-jreyrm

And for your previous comment, I checked the playground and this is not the same situation. If I'm not mistaken, the home doesn't have a tresjs animation and nowhere on the playground you go from an experiment to another experiment (ie. from a page with a Tres canvas to another page with a Tres canvas).

[alvarosabu]

@T-Mike gotcha! Thanks

[alvarosabu]

Hey everyone @T-Mike @markus-gx sorry took so long to get back to you. I've been trying to figure out this bug the last 3 weeks and the only workaround I found was to wrap the TresCanvas on each page with a <ClientOnly> 😥

My rough guess is that the SSR version of the component is causing the issue, but now after the new version of nuxt 3.10.0 is completely broken #83 , I already reach out to the nuxt team for help.

Sorry for the inconvenience