Error `The component <T> can only be used in conjunction with the custom preprocessor.` on SvelteKit (only)

[Zedespook]

Steps to Reproduce

1. Create SvelteKit project via the Vite CLI:

npm create vite

2. Install Threlte:

npm i -D three @threlte/core @threlte/preprocess svelte-sequential-preprocessor @threlte/extras @threlte/rapier @dimforge/rapier3d-compat @threlte/theatre @theatre/core @theatre/studio @types/three

3. Add Threlte pre-process to your configuration:

// ...
import { preprocessThrelte } from '@threlte/preprocess'
//...

export default defineConfig({
  preprocess: preprocessThrelte(),
})

4. Since we are using SvelteKit, we also should add this to the configuration:

ssr: {
  noExternal: ['three', 'troika-three-text']
}

5. Replace the / route's +page.svelte with their documentation snippet:

<script>
    import { Canvas, InteractiveObject, OrbitControls, T } from '@threlte/core'
    import { spring } from 'svelte/motion'
    import { degToRad } from 'three/src/math/MathUtils'

    const scale = spring(1)
</script>

<div>
    <Canvas>
        <T.PerspectiveCamera makeDefault position={[10, 10, 10]} fov={24}>
            <OrbitControls maxPolarAngle={degToRad(80)} enableZoom={false} target={{ y: 0.5 }} />
        </T.PerspectiveCamera>

        <T.DirectionalLight castShadow position={[3, 10, 10]} />
        <T.DirectionalLight position={[-3, 10, -10]} intensity={0.2} />
        <T.AmbientLight intensity={0.2} />

        <!-- Cube -->
        <T.Group scale={$scale}>
            <T.Mesh position.y={0.5} castShadow let:ref>
                <!-- Add interaction -->
                <InteractiveObject
                    object={ref}
                    interactive
                    on:pointerenter={() => ($scale = 2)}
                    on:pointerleave={() => ($scale = 1)}
                />

                <T.BoxGeometry />
                <T.MeshStandardMaterial color="#333333" />
            </T.Mesh>
        </T.Group>

        <!-- Floor -->
        <T.Mesh receiveShadow rotation.x={degToRad(-90)}>
            <T.CircleGeometry args={[3, 72]} />
            <T.MeshStandardMaterial color="white" />
        </T.Mesh>
    </Canvas>
</div>

<style>
    div {
        height: 100%;
        width: 100%;
    }
</style>

6. Run the app with npm run dev
7. Go to http://localhost:5173/

When I get to the route, it's just a blank page. Opening the console, I get the error mentioned in the title.

[Zedespook]

Posted on the wrong issues page sorry.