Inspector component breaks Threlte App

[lortschi]

After regular install of the three-inspect module and following the documentation for adding to Threlte Ecosystem ended up with this error bellow on the screenshot.

Current module dependencies:

"@threlte/core": "latest",
"@threlte/extras": "latest",
"svelte": "^4.2.15",
"three": "^0.163.0",
"three-inspect": "^0.4.5",
"vite": "^5.2.9"

I am going to paste the terminal error log. This is a bit more retrieving as the browser log:

1:35:47 PM [vite] Error when evaluating SSR module /src/routes/+page.svelte: failed to import "/src/lib/components/App.svelte"
|- TypeError: vite_ssr_import_2.default.install is not a function
at /node_modules/.pnpm/three-inspect@0.4.5_@types+three@0.164.0_three@0.163.0/node_modules/three-inspect/dist/components/Internal/CameraControls.svelte:17:16
at async instantiateModule

TypeError: vite_ssr_import_2.default.install is not a function
at /node_modules/.pnpm/three-inspect@0.4.5_@types+three@0.164.0_three@0.163.0/node_modules/three-inspect/dist/components/Internal/CameraControls.svelte:17:16

Actually looks to me very TS specific error. I am not using TS in my project. ..just wanted to mention.

[supermoos]

Same issue for me.

[michealparks]

Hello! It's a bit hard to pinpoint the issue without a full project to investigate. It's possible that the issue may be elsewhere and not specifically with three-inspect. Here is an example of a very barebones Threlte + Vite setup - not involving Typescript - where the inspector is functioning as intended:

https://stackblitz.com/edit/vitejs-vite-sfwjke?file=src%2FScene.svelte&terminal=dev

[supermoos]

I understand! Here's the issue reproduced: https://stackblitz.com/edit/svelte-kit-z4jvcg?file=src%2Froutes%2F%2Bpage.svelte

09:03:48 [vite-plugin-svelte] /home/projects/svelte-kit-z4jvcg/node_modules/svelte-tweakpane-ui/dist/control/CubicBezier.svelte:91:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles. 09:03:50 [vite] Error when evaluating SSR module /node_modules/three-inspect/dist/components/Tools/FreeCamera.svelte: failed to import "/node_modules/three-inspect/dist/components/Internal/CameraControls.svelte" |- Error: line must be greater than 0 (lines start at line 1) at originalPositionFor$1 (file:///home/projects/svelte-kit-z4jvcg/node_modules/vite/dist/node/chunks/dep-BKbDVx1T.js:10470:15)

[michealparks]

Thanks for including an example! That's interesting. I'm not sure why, but I was able to fix the issue in your stackblitz by creating a new <Scene> component placed within <Canvas> and moving <Inspector> there. Since I don't have much time to investigate further I'll update the docs accordingly to make it clear that setup is required.

[supermoos]

Thanks for providing the workaround, however it only seems to work when I make the changes while having 'npm run dev' already going. If I restart the dev process it throws the same errors as above again.

[michealparks]

Another workaround you could go for while I continue to investigate is to disable SSR in the part of you SvelteKit app that imports and renders the inspector:

// +page.ts
export let ssr = false

[michealparks]

This should be fixed in v0.7.2. Let me know if it's still showing up for you.