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?

[LeoDog896]

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,