I recently updated SvelteKit, Svelte, and Vite all at once. Following the updates, none of my Svelte third party libraries have been working. I've been looking through the recent version changes for breaking changes, and I can't seem to find what I need to resolve. Both my vite.config.js and my svelte.config.js are pretty empty. I tried downgrading them again, but that wasn't working either, so it might not have been the updates.
This is the error I receive any time I use a third party component (in this case, Threlte's T.Mesh):
Error: <T.Mesh> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules. Otherwise you may need to fix a <T.Mesh>. at Module.validate_component (/FRONT/node_modules/svelte/src/runtime/internal/ssr.js:142:9) at eval (/FRONT/src/lib/client/3D/Scene.svelte:11:34) at Object.$$render (/FRONT/node_modules/svelte/src/runtime/internal/ssr.js:174:16) at eval (/FRONT/src/routes/(home)/(test)/test/[email protected]:469:440) at Object.$$render (/FRONT/node_modules/svelte/src/runtime/internal/ssr.js:174:16) at Object.default (/FRONT/.svelte-kit/generated/root.svelte:102:133) at eval (/FRONT/src/routes/+layout.svelte:63:41) at Object.$$render (/FRONT/node_modules/svelte/src/runtime/internal/ssr.js:174:16) at eval (/FRONT/.svelte-kit/generated/root.svelte:65:129) at $$render (/FRONT/node_modules/svelte/src/runtime/internal/ssr.js:174:16)
I've seen other people with this problem, but I only see it with their own imported components, not third-party. They're trying to do a named-import on a default export. This is named and third-party.
I ended up getting rid of all my third party library components and writing those components from scratch, but today I added Threlte and I decided I should probably just figure this out.
Here is my vite.config.js:
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from "vite";
export default defineConfig({
plugins: [sveltekit()],
ssr: {
noExternal: ['three']
},
});
My svelte.config.js:
import adapterNode from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/kit/vite';
const config = {
preprocess: [vitePreprocess()],
kit: {
adapter: adapterNode({
out: 'build',
envPrefix: ''
})
},
};
export default config;
I'm importing a component from my client-side lib into my +page.svelte:
import Scene from "$lib/client/3D/Scene.svelte";
import { Canvas } from "@threlte/core";
Here is the Scene.svelte:
<script>
import { T } from "@threlte/core";
</script>
<T.Mesh>
<T.BoxGeometry />
<T.MeshBasicMaterial />
</T.Mesh>
I'm probably missing something with vite.config.js is my guess. I'm fairly new to Vite.
Reversing package updates, fiddling with vite.config.js and svelte.config.js, web searches, chatgpt, etc.
Expecting: import a third-party package component into my +page.svelte
Result: Error for SSR component not being compiled.