No DOM elements found matching selector in Svelte

[Hause Lin]

Summary

When using the widget with Svelte, I get this error: No DOM elements found matching selector. Svelte code is included below. I really appreciate any help anyone can provide. Thanks!

<script>
	import uploadcare from "uploadcare-widget/uploadcare.lang.en.min.js";
	
	const widget = uploadcare.Widget("#uploader", {
		publicKey: "demopublickey",
		imagesOnly: true,
		crop: "300x200",
	});
</script>

<input id="uploader" type="hidden" />

Relevant information

See Svelte REPL/example here.

Environment (if relevant)

Svelte 3.44.3

[Alex Chernenko]

Hi @hauselin, you can use this binding to get a reference to a rendered element. See https://svelte.dev/tutorial/bind-this. Here's how you can solve this:

<script>
	import uploadcare from "uploadcare-widget/uploadcare.lang.en.min.js";
	import { onMount } from "svelte";
	
	let widgetInput, widget;
	
	onMount(() => {
		widget = uploadcare.Widget(widgetInput, {
			publicKey: "demopublickey",
			imagesOnly: true,
			crop: "300x200",
		});
		console.log(widget);
	});
</script>

<input id="uploader" type="hidden" bind:this={widgetInput} />

Hope this helps.

[Hause Lin]

Perfect! I've updated the code and it works. Thanks also for the reference to Svelte's bind:this. Thanks, @optlsnd!