Doesn't work with Sveltekit

[steddyman]

I'm not sure if this is supposed to work with Sveltekit or not, but it doesn't for me. Even a single import of the Canvas component fails for me:

<script>
    import { Canvas } from 'svelte-canvas';
    // import Background from './LandBackground.svelte';
  </script>
  
  <!-- <Canvas autoplay> -->
    <!-- <Background /> -->
  <!-- </Canvas> -->

It fails with:

[vite] Error when evaluating SSR module /src/lib/components/utility/LandFinder.svelte: failed to import "svelte-canvas"
|- TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for /Users/stepheneddy/Dropbox/Dev/Crypto/Pixels/web-app/node_modules/svelte-canvas/dist/components/Canvas.svelte
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
    at defaultLoad (node:internal/modules/esm/load:141:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:409:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:291:45)

[dnass]

What versions of svelte-canvas, SvelteKit, and Vite are you using? Have you made any changes to the default configurations in svelte.config.js or vite.config.js?

[steddyman]

Hi I am using the latest version of svelte-canvas, Svelte is 4.2.8, Vite is 5.1.4 and Sveltekit is 2.5.0. I am using the adapter-node to build the app, but this is just running locally via npm run dev. This is my svelte.config.js:

/** @type {import('@sveltejs/kit').Config} */
const config = {
	extensions: ['.svelte'],
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: [vitePreprocess()],
	
	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter()
	},

	vite: {
		optimizeDeps: {
			exclude: ['mongoose']
		},
		resolve: {
			alias: {
				$pixel_libs: path.resolve('../pixel_libs') // adjust the path accordingly
			}
		}
	}
};

and this is my vite.configjs

export default defineConfig({
	plugins: [sveltekit(), purgeCss()]
});

[dnass]

I wasn't able to reproduce this on my end, even with the same versions and configs. Shot in the dark, but could you try adding 'svelte-canvas' to config.vite.optimizeDeps.exclude?

[tristan-f-r]

Also, if that doesn't work, could you create a minimum reproducible example to test with?

[steddyman]

Hi Sorry for the slow replies. I had a tight deadline for this feature, so I have just implemented it using a raw canvas html element and reactive properties. When I get more time I'll circle back around and try this again. Sorry for the trouble,

[shoen1x]

I wasn't able to reproduce this on my end, even with the same versions and configs. Shot in the dark, but could you try adding 'svelte-canvas' to config.vite.optimizeDeps.exclude?

It's working in my case 🙌