Closed lolcabanon closed 5 months ago
Hello @lolcabanon! Thanks for the feedback!
Can you provide a minimal reproducible repo?
I have a sveltekit project and i use named imports, like this:
import { Mask } from '@ionited/mask';
I have a sveltekit project and i use named imports, like this:
import { Mask } from '@ionited/mask';
I was shocked it didn't work for me... Do you use SK 2 and Vite 5?
Also my package manager is pnpm
.
I'll try to reproduce in a minimal project!
I am using SK 1 and Vite 4, i will check the package in these versions.
Ahh I think Vite 5 changed some things about how it handle imports. Not sure, but that would explain it!
Hello @lolcabanon! This problem has been fixed with release 0.2.0
Hello @lolcabanon! This problem has been fixed with release 0.2.0
Awesome thanks!
@gabrielcursino would you consider adding the if (!options) return; // early return if undefined
line to your wrapper?
The benefit is that I can put the use:mask={maskOptions}
inside a component and use it directly from a +page.svelte
. If this line is not there, it will throw an error.
TextInput.svelte :
<script>
import { mask } from "@ionited/mask-svelte";
export let maskOptions = undefined;
</script>
<input type="text" use:mask={maskOptions} />
+page.svelte :
<script>
const maskOptions = { mask: "AAA 999" };
</script>
<!-- this will work -->
<TextInput {maskOptions} />
<!-- this will throw an error -->
<TextInput />
When I try to use either
@ionated/mask
or@ionated/mask-svelte
I get the following error :Even this ^ does not work : it says that the package does not provide a default export.
Maybe you would need to review your build process?
I made my own svelte action wrapper that looks similar to yours (in JS) :
PS: It also allows for early return in case options are
undefined
, which is convenient since I put theuse:mask
directive directly in myTexInput
component andmaskOptions
might not be defined from the outside (+page.svelte
).