Named export 'Mask' not found.

[lolcabanon]

When I try to use either @ionated/mask or @ionated/mask-svelte I get the following error :

[vite] Named export 'Mask' not found. The requested module '@ionited/mask' is a CommonJS module, which may not support all module.exports as named exports.

CommonJS modules can always be imported via the default export, for example using :

import pkg from '@ionited/mask'; const {Mask} = pkg;

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) :

import * as Mask from '@ionited/mask';
// HERE ^ IS THE MAGIC

/**
 * @type {import("svelte/action").Action<HTMLInputElement, { mask: RegExp | string | import('@ionited/mask/dist/masks/default').MaskDefault['options'] } | undefined>}
 */
export const mask = (node, options) => {
  if (!options) return; // early return if undefined

  const mask = Mask.Mask(node, options);

  return {
    destroy: () => {
      mask.instance.destroy();
    }
  };
};

PS: It also allows for early return in case options are undefined, which is convenient since I put the use:mask directive directly in my TexInput component and maskOptions might not be defined from the outside (+page.svelte).

---

node  20.11.1
pnpm  8.15.5
svelte  4.2.12
@sveltejs/kit  2.5.5
vite  5.2.7
typescript  5.4.3

[gabrielcursino]

Hello @lolcabanon! Thanks for the feedback!

Can you provide a minimal reproducible repo?

[gabrielcursino]

I have a sveltekit project and i use named imports, like this:

import { Mask } from '@ionited/mask';

[lolcabanon]

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!

[gabrielcursino]

I am using SK 1 and Vite 4, i will check the package in these versions.

[lolcabanon]

Ahh I think Vite 5 changed some things about how it handle imports. Not sure, but that would explain it!

[gabrielcursino]

Hello @lolcabanon! This problem has been fixed with release 0.2.0

[lolcabanon]

Hello @lolcabanon! This problem has been fixed with release 0.2.0

Awesome thanks!

[lolcabanon]

@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 />