Hi there!
Reproduce:
Reproduce (click here)
npm create vue@latest
✔ **Project name:** … babylon-reproduce-bug
✔ **Add TypeScript?** … Yes
✔ **Add JSX Support?** … No
✔ **Add Vue Router for Single Page Application development?** … No
✔ **Add Pinia for state management?** … No
✔ **Add Vitest for Unit Testing?** … No
✔ **Add an End-to-End Testing Solution?** › Playwright
✔ **Add ESLint for code quality?** … Yes
✔ **Add Prettier for code formatting?** … Yes
- Install default setup:
cd babylon-reproduce-bug; npm install; npm run format; npm run dev; - Install Babylon
npm i @babylonjs/core @babylonjs/loaders @babylonjs/havok - Add to
vite.config.ts:
optimizeDeps: {
// https://forum.babylonjs.com/t/unable-to-load-havok-plugin-error-while-loading-wasm-file-from-browser/40289/28?page=2
exclude: ['@babylonjs/havok'],
},
because without it will be:
- App.vue
<script setup lang="ts">
import "@babylonjs/loaders/glTF"
import HavokPhysics from '@babylonjs/havok'
import { ref } from 'vue'
import { Engine } from '@babylonjs/core'
const canvas = ref<HTMLCanvasElement>();
HavokPhysics().then((hk) => {
if (!canvas.value) {
return;
}
console.log(hk) // temp
new Engine(canvas.value, true, {
preserveDrawingBuffer: true,
stencil: true,
})
// ....
});
</script>
<template>
<canvas ref="canvas"/>
</template>
Result:
flowGraphExecutionBlock.ts:12 Uncaught TypeError: Class extends value undefined is not a constructor or null
at flowGraphExecutionBlock.ts:12:7
(anonymous) @ flowGraphExecutionBlock.ts:12
My goal: Just call the function SceneLoader.ImportMeshAsync(…), but @babylonjs/loaders/glTF doesn’t work
