Docs extend example throws error

[andretchen0]

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.

[ThimoDEV]

@andretchen0 I tried to reproduce this issue, but when I use the code in the stackblitz example I get

TypeError: Cannot read properties of undefined (reading 'renderer')

and in my fork I get state is undefined. Am I missing something for it to get your error?

[andretchen0]

@ThimoDEV

I get the error you mention when testing in Chrome.

Firefox throws the error I posted above.

I'll update the top-line post to reflect that.