TresCanvas component is missing template or render function after 3.10.0

alvarosabu commented 9 months ago

Describe the bug

SSR version of TresCanvas is broken when the project is using npm as the package manager.

Screenshot 2024-01-31 at 16 08 39

Reproduction

https://stackblitz.com/edit/nuxt-starter-hzbvpr?file=nuxt.config.ts

Steps to reproduce

Run npm install and npm run dev
Click on /page1 link
Check console warning.

System Info

System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 89.14 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.14.1 - ~/.nvm/versions/node/v18.14.1/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.3.1 - ~/.nvm/versions/node/v18.14.1/bin/npm
  Browsers:
    Brave Browser: 120.1.61.116
    Chrome: 121.0.6167.85
    Firefox: 121.0.1
    Safari: 17.2.1
  npmPackages:
    @tresjs/cientos: ^3.7.0 => 3.7.0 
    @tresjs/nuxt: ^2.1.0 => 2.1.0 
    nuxt: ^3.10.0 => 3.10.0 
    vite-plugin-glsl: ^1.2.1 => 1.2.1 
    vue: ^3.4.15 => 3.4.15 
    vue-router: ^4.2.5 => 4.2.5

Used Package Manager

npm, pnpm

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 commented 9 months ago

Workaround for now.

If TresCanvas is imported from @tresjs/core explicitly, it does work ✅

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
</script>
<template>
<TresCanvas window-size>
  <TresPerspectiveCamera />
  <TresMesh>
    <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
    <TresMeshBasicMaterial color="orange" />
  </TresMesh>
</TresCanvas>
</template>

alvarosabu commented 9 months ago

Hey @danielroe sorry to bother you, but we might need a hand.

We're struggling a lot with the SSR version of the TresCanvas, before we had this error https://github.com/Tresjs/nuxt/issues/41 when changing routes using NuxtLink, the workaround was to wrap it on <ClientOnly /> but after updating v3.10.0 it's completely broken

We are registering the component on the module like this:

 addComponent({
      name: 'TresCanvas',
      filePath: '@tresjs/core',
      export: 'TresCanvas',
      mode: 'client',
      _raw: true,
    })
    addComponent({
      name: 'TresCanvas',
      filePath: resolver.resolve('./runtime/ServerTresCanvas.vue'),
      mode: 'server',
    })

Where ServerTresCanvas.vue is:

<template>
  <div>
    <canvas style="" />
  </div>
</template>

Any idea how could address it? Thanks 🙏🏻

alvarosabu commented 9 months ago

Update, @danielroe

I tested removing the ServerPlaceholder and removing the mode:client and _raw: true properties of the addComponent of the module like this:

 addComponent({
    name: 'TresCanvas',
    filePath: '@tresjs/core',
    export: 'TresCanvas',
  })

Which is weird, isn't it? Should break because TresCanvas can only be used on the client side.

Now it renders on the home page, but it gives a blank page when navigating using <NuxtLink> as #41 (if I use anchor or router-link this doesn't happen)

https://github.com/Tresjs/nuxt/assets/4699008/39dd207c-161d-49bc-9c06-b2252d79076d

If the TresCanvas inside is wrapped by <ClientOnly> it does render correctly.

T-Mike commented 9 months ago

In ServerTresCanvas.vue try removing the <canvas> tag. Nodejs doesn't support Canvas tag and Canvas API.

Tresjs / nuxt