Can't export createWidget in Vite 5

[skinofstars]

Hi, I've got a Sveltekit 2 project using Vite 5.

When I use import { createWidget } from '@typeform/embed'; I can't build as I get the following error:

"createWidget" is not exported by "node_modules/@typeform/embed/build/index.js"

This has worked when I was using Sveltekit 1, Vite 4.

[mathio]

I am sorry but I have no experience using Sveltekit and limited experience using Vite. Can you please provide a reproducible example for both cases - eg. a repo(s) we can clone?

The build/index.js actually does export the createWidget function (it exports t object with t.createWidget function defined).

[skinofstars]

Hi, example repo is here

https://github.com/WhoTargetsMe/typeform-sveltekit-example

Previously I was only getting the error on build, but with this example the error is in both build and dev.

---

Here is pretty much the entire code. You can find that in src/routes/+page.svelte

<script lang="ts">
  import "@typeform/embed/build/css/widget.css";
  import { createWidget } from "@typeform/embed";
  import { onMount } from "svelte";

  const formId = "y1uAAugn";

  let elem: HTMLElement;

  onMount(() => {
    elem = document.createElement("div");

    try {
      createWidget(formId, {
        container: elem,
      });
    } catch (error) {
      console.error("Error creating Typeform widget", error);
    }
  });
</script>

<div bind:this={elem} />

[mathio]

Hi @skinofstars

Are you still experiencing an issue with this?

I played around with your example. It looks like importing the embed lib like this works:

import * as pkg from '@typeform/embed';

My no experience with Svelte is limited, though. We did not test the lib with this framework.

Sorry for the delayed response.

[skinofstars]

Hi, yes I did fix this!

My problem was document.createElement("div"). Once I bound to the element directly it worked. This is a working Typeform component in Svelte:

<script lang="ts">
	import '@typeform/embed/build/css/widget.css';
	import { createWidget } from '@typeform/embed';
	import { onMount } from 'svelte';

	export let formId: string;
	export let options = {};

	let elem: HTMLElement;

	onMount(() => {
		try {
			createWidget(formId, {
				container: elem,
				...options
			});
		} catch (error) {
			console.error('Error creating Typeform widget', error);
		}
	});
</script>

<div bind:this={elem} />

[mathio]

Thats great to hear 🚀 Thanks for sharing!