Svelte: bind:this not working in exported component

[ValentinH]

I've created my first Svelte 3 component 🎉 and I'd like to share it. Unfortunately, I'm encountering an issue when importing it using the generated index.js file: DOM element binding using the bind:this attribute doesn't work apparently (or the way my component is exported is wrong maybe).

If I import my component in a Svelte application, it works fine because it reads the pkg.svelte file.

However, in another environment which doesn't read the svelte property, like CodeSandbox, it breaks. Basically, when onMount is called, the element is not bound and I get Cannot read property 'addEventListener' of null when trying to add a listener on it.

Demo of the issue: https://codesandbox.io/s/o443j977j5
My component source: https://github.com/ValentinH/svelte-easy-crop/blob/master/src/Cropper.svelte

[EmilTholin]

Hi @ValentinH!

I just cloned the repository and tried the UMD build locally, and it seems to work great! If I imperatively create the Cropper component in CodeSandbox, it works great as well.

Could it be that CodeSandbox uses the svelte field in package.json, but your svelte field points to a file that doesn't exist?

[ValentinH]

Hey thanks for checking. Indeed, the svelte field was wrong but it was only a recent change made after opening the ticket (thanks for finding this glitch 😀).

I've updated the package and now there is the same issue as described in the original post.

Here's the updated sandbox: https://codesandbox.io/s/k3xrkyyo2o

[ValentinH]

It seems to have a race condition because it sometimes works (it worked when I run the new sandbox for the first time).

[ValentinH]

Any help please?

[pateketrueke]

It seems to be working on my module: https://svelte.dev/repl/28538130eca14308becf665b28d9fe0e?version=3.4.4

[ValentinH]

Thanks for providing another example :) It seems that it's also broken on codesandbox though: https://codesandbox.io/s/inspiring-carson-o1eo2

[ValentinH]

Indeed, my component also work on the REPL: https://svelte.dev/repl/a6fc511aafd94e428d0bb6670f477abc?version=3.4.4. I'm closing this one and opening an issue on CodeSandbox :)

[Conduitry]

As mentioned in #2937, this is the sort of thing that happens when you have two copies of Svelte's internal scheduler running. If you're importing the _compiled_ version of an external Svelte component into another Svelte component, this is what you end up with. There's a svelte field in package.json that's respected by rollup-plugin-svelte and which is intended to point at the uncompiled Svelte source, so that the external component can be bundled together with the main app, without any duplicated internals. As of fairly recently, the Svelte REPL also respects this field. I have no idea how CodeSandbox works internally, but I would imagine they would also have to look at that field when importing an external Svelte component from another Svelte component.

[pateketrueke]

In addition to that: is not required to point to "svelte": "src/main.html" if you're bundling for es, "module": "dist/main.mjs" would suffice.

I mean, it's a good thing to provide a single file, not the whole sources again. 💅