Use in Sveltekit
# support
c
import Vapi from '@vapi-ai/web'; let vapi = new Vapi('...'); Make the below error. 10:23:13 PM [vite-plugin-svelte] /Users/curtiskim/Repos/gpt-researcher/frontend-new/src/routes/+page.svelte:378:25 A11y: '#' is not a valid href attribute TypeError: __vite_ssr_import_5__.default is not a constructor ...
v
Hi @curtis, I'm an AI assistant for Vapi. I'll analyze available sources and get back to you shortly.
----------------------------- **While I generate an answer, here are some sources that might be helpful**: * [Vapi Flutter SDK]() * [Vapi Web SDK]() * [Create Phone Call]() * [Web SDK]() -----------------------------
### Answer It seems like you are encountering an issue with using the Vapi Web SDK in a SvelteKit application, particularly related to server-side rendering (SSR) environments. The error message
TypeError: __vite_ssr_import_5__.default is not a constructor
suggests that the Vapi module is not being correctly recognized as a constructor, possibly due to how modules are handled in SSR. To resolve this issue, ensure that the Vapi SDK import is conducted in a client-side context only. SvelteKit differentiates between server and client code execution, and you might need to dynamically import the Vapi SDK within onMount to ensure it only executes client-side:
Copy code
javascript
import { onMount } from 'svelte';

let vapi;

onMount(() => {
    import('@vapi-ai/web').then((module) => {
        vapi = new module.default('your-public-key');
    });
});
This snippet ensures that the Vapi SDK is only initialized on the client side, avoiding errors related to server-side rendering. If you continue to experience issues, you may need to review the configuration of your setup to ensure compatibility with SSR and SvelteKit [(1)]() .
Glad I could be helpful. Feel free to create a new thread with any new questions you may have.
s
Can you share the reproducible github so that we can give it a try?
3 Views