Tresjs/tres

Docs `extend` example throws error

オープン

#565 opened on 2024/03/02

 (3 件のコメント) (0 件のリアクション) (0 人の担当者)Vue (188 件のフォーク)github user discovery
bugdocsgood first issuehelp wanted

Repository metrics

Stars
 (3,582 個のスター)
PR merge metrics
 (PR metrics pending)

説明

Describe the bug

Problem

The extend example code from the docs throws an error when used as written.

Result is the same for Stackblitz and local playground.

Error (abridged)

Firefox

Uncaught (in promise) TypeError: _ctx.state is undefined
    default TheExperience.vue:14
    renderFnWithContext runtime-core.esm-bundler.js:774
    normalizeChildren runtime-core.esm-bundler.js:7090
    createBaseVNode runtime-core.esm-bundler.js:6901
    _createVNode runtime-core.esm-bundler.js:6978
    createVNodeWithArgsTransform runtime-core.esm-bundler.js:6855
    createBlock runtime-core.esm-bundler.js:6828
    _sfc_render TheExperience.vue:11
    renderComponentRoot runtime-core.esm-bundler.js:834
    componentUpdateFn runtime-core.esm-bundler.js:5789
    run reactivity.esm-bundler.js:178
    update runtime-core.esm-bundler.js:5902
    setupRenderEffect runtime-core.esm-bundler.js:5910
    mountComponent runtime-core.esm-bundler.js:5700
    processComponent runtime-core.esm-bundler.js:5653
    patch runtime-core.esm-bundler.js:5128
    componentUpdateFn runtime-core.esm-bundler.js:5796
    run reactivity.esm-bundler.js:178
    update runtime-core.esm-bundler.js:5902
    setupRenderEffect runtime-core.esm-bundler.js:5910
    mountComponent runtime-core.esm-bundler.js:5700
    processComponent runtime-core.esm-bundler.js:5653
    patch runtime-core.esm-bundler.js:5128
    componentUpdateFn runtime-core.esm-bundler.js:5861
    run reactivity.esm-bundler.js:178
    update runtime-core.esm-bundler.js:5902
    callWithErrorHandling runtime-core.esm-bundler.js:158
    flushJobs runtime-core.esm-bundler.js:365
    promise callback*queueFlush runtime-core.esm-bundler.js:275
    queuePostFlushCb runtime-core.esm-bundler.js:295
    queueEffectWithSuspense runtime-core.esm-bundler.js:1683
    scheduler runtime-core.esm-bundler.js:1852
    triggerEffect reactivity.esm-bundler.js:373
    triggerEffects reactivity.esm-bundler.js:363
    triggerRefValue reactivity.esm-bundler.js:973
    effect reactivity.esm-bundler.js:1130
    triggerEffect reactivity.esm-bundler.js:373
    triggerEffects reactivity.esm-bundler.js:358
    triggerRefValue reactivity.esm-bundler.js:973
    effect reactivity.esm-bundler.js:1130
    triggerEffect reactivity.esm-bundler.js:373
    triggerEffects reactivity.esm-bundler.js:358
    triggerRefValue reactivity.esm-bundler.js:973
    set value reactivity.esm-bundler.js:1017
    finalizeNavigation vue-router.mjs:3353
    pushWithRedirect vue-router.mjs:3218
    promise callback*pushWithRedirect vue-router.mjs:3185
    push vue-router.mjs:3110
    install vue-router.mjs:3551
    use runtime-core.esm-bundler.js:3786
    <anonymous> main.ts:9
    setTimeout handler* __uno.css:19
    <anonymous> __uno.css:19

Chrome

Uncaught TypeError: Cannot read properties of undefined (reading 'renderer')
    at App.vue:14:19
    at renderFnWithContext (chunk-QSL5RKHU.js?v=52cbdb0e:2162:13)
    at normalizeChildren (chunk-QSL5RKHU.js?v=52cbdb0e:8380:34)
    at createBaseVNode (chunk-QSL5RKHU.js?v=52cbdb0e:8191:5)
    at _createVNode (chunk-QSL5RKHU.js?v=52cbdb0e:8268:10)
    at createVNodeWithArgsTransform (chunk-QSL5RKHU.js?v=52cbdb0e:8145:10)
    at createBlock (chunk-QSL5RKHU.js?v=52cbdb0e:8118:5)
    at Proxy._sfc_render (App.vue:11:3)
    at renderComponentRoot (chunk-QSL5RKHU.js?v=52cbdb0e:2211:17)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-QSL5RKHU.js?v=52cbdb0e:7085:46)

Screenshot

Firefox

Chrome

Example code from docs

In case it's updated in the meantime, here's the example code from the docs as of March 2, 2024:

<script setup lang="ts">
import { extend } from '@tresjs/core'
import { OrbitControls } from 'three/addons/controls/OrbitControls'
import { TextGeometry } from 'three/addons/geometries/TextGeometry'

// Add the element to the catalogue
extend({ TextGeometry, OrbitControls })
</script>

<template>
  <TresCanvas shadows alpha>
    <TresPerspectiveCamera :position="[5, 5, 5]" />
    <TresOrbitControls v-if="state.renderer" :args="[state.camera, state.renderer?.domElement]" />
    <TresMesh>
      <TresTextGeometry :args="['TresJS', { font, ...fontOptions }]" center />
      <TresMeshMatcapMaterial :matcap="matcapTexture" />
    </TresMesh>
  </TresCanvas>
</template>

Reproduction

https://stackblitz.com/edit/tresjs-basic-hkwcer?file=src%2FApp.vue

Steps to reproduce

  • Open Stackblitz
  • Open browser console
  • See error

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.3 - /usr/local/bin/pnpm
  npmPackages:
    @tresjs/cientos: ^3.5.1 => 3.5.1 
    @tresjs/core: ^3.4.1 => 3.4.1 
    @tresjs/eslint-config-vue: ^0.2.1 => 0.2.1 
    vite: ^4.5.0 => 4.5.0 


### Used Package Manager

npm

### Code of Conduct

- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/tres/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/tres/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://tresjs.org/guide).
- [X] Check that there isn't [already an issue](https://github.com/tresjs/tres/issues) that reports the same bug to avoid creating a duplicate.
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

コントリビューターガイド