Cannot find module '/Users/raphael/dev/sweif/node_modules/.pnpm/svelte-tel-input@2. 1.0/node_modules/svelte-tel-input/utils/helpers'
Closed this issue · 4 comments
happysalada commented
I got the following error when trying to use the latest version
Internal server error: Cannot find module '/Users/raphael/dev/sweif/node_modules/.pnpm/svelte-tel-input@2.
1.0/node_modules/svelte-tel-input/utils/helpers' imported from /Users/raphael/dev/sweif/node_modules/.pnpm
/svelte-tel-input@2.1.0/node_modules/svelte-tel-input/index.js
at new NodeError (node:internal/errors:399:5)
at finalizeResolution (node:internal/modules/esm/resolve:226:11)
at moduleResolve (node:internal/modules/esm/resolve:839:10)
at defaultResolve (node:internal/modules/esm/resolve:1069:11)
at DefaultModuleLoader.resolve (node:internal/modules/esm/loader:307:12)
at DefaultModuleLoader.getModuleJob (node:internal/modules/esm/loader:156:32)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:33)
at link (node:internal/modules/esm/module_job:75:36)
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/raphael/dev/sweif/node_modules/.pnpm/svelte-tel-i
nput@2.1.0/node_modules/svelte-tel-input/utils/helpers' imported from /Users/raphael/dev/sweif/node_module
s/.pnpm/svelte-tel-input@2.1.0/node_modules/svelte-tel-input/index.js
at new NodeError (node:internal/errors:399:5)
at finalizeResolution (node:internal/modules/esm/resolve:226:11)
at moduleResolve (node:internal/modules/esm/resolve:839:10)
at defaultResolve (node:internal/modules/esm/resolve:1069:11)
at DefaultModuleLoader.resolve (node:internal/modules/esm/loader:307:12)
at DefaultModuleLoader.getModuleJob (node:internal/modules/esm/loader:156:32)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:33)
at link (node:internal/modules/esm/module_job:75:36) {
code: 'ERR_MODULE_NOT_FOUND'
let me know if anything.
gyurielf commented
Hey!
Thanks for the report. I'll look around.
gyurielf commented
I can't reproduce the error yet.
However, there is a sandbox for testing. (as I see you use pnpm, so this is a pnpm version of sandbox)
https://stackblitz.com/edit/svelte-tel-input-repl-grdhz9?file=package.json
It works in the sandbox on the latest version.
Can you either provide more details or a fork of the stackblitz for me please ?
Thanks!
happysalada commented
This was just a matter of restarting the dev server, somehow that error disappeared after that.
using your advanced phone input, I'm running into a very weird bug. I have a form and right on submit, the 'value' property gets emptied, and I cannot figure out.
I've looked at the library code, and there must be an event somewhere that triggers the reset of that value.
here is the full code for the page
<script lang="ts">
import { superForm } from "sveltekit-superforms/client";
import * as EmailValidator from "email-validator";
import type { PageData } from "./$types";
import { goto } from "$app/navigation";
import { user } from "$lib/stores";
import Nav from "$lib/Nav.svelte";
import PhoneInput from "$lib/PhoneInput.svelte";
export let data: PageData;
// just needed to prevent the form from sending if phone number is invalid
let phoneValid = false;
$: console.log($form.phone)
const { form, errors, constraints, enhance } = superForm(data.form, {
validators: {
name: (input) =>
input.length < 2 ? "Name needs to be at least 2 characters" : undefined,
country: (input) =>
input.length == 0 ? "Country cannot be empty" : undefined,
phone: (_input) => (phoneValid ? undefined : "Invalid phone number"),
email: (input) =>
EmailValidator.validate(input) ? undefined : "Email is invalid",
password: (input) =>
input.length < 6
? "Password needs to be at least 6 characters long"
: undefined,
passwordConfirmation: (input) =>
input.length < 6
? "Password confirmation does not match password"
: undefined,
},
});
user.subscribe(($user) => {
if ($user?.email) {
goto(`/${$user.email}/dashboard`);
}
});
</script>
<Nav />
<!--
This example requires updating your template:
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div class="bg-white px-4 py-8 shadow sm:rounded-lg sm:px-10">
<form class="space-y-6" method="POST" use:enhance>
<div>
<label
for="name"
class="block text-sm font-medium leading-6 text-gray-900"
>Nombre</label
>
<div class="mt-2">
<input
id="name"
name="name"
type="name"
autocomplete="name"
class="block w-full rounded-md border-0 py-1.5 pr-10 {$errors.name
? 'text-red-900 placeholder:text-red-300 ring-red-300 focus:ring-red-500'
: 'text-gray-900 ring-gray-300 focus:ring-primary-500'} ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6"
placeholder="Nico sweif"
aria-invalid={$errors.name != undefined}
aria-describedby={$errors.name != undefined ? "name-error" : ""}
data-invalid={$errors.name}
bind:value={$form.name}
{...$constraints.name}
/>
{#if $errors.name}
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3"
>
<svg
class="h-5 w-5 text-red-500"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"
/>
</svg>
</div>
{/if}
</div>
{#if $errors.name}
<p class="mt-2 text-sm text-red-600" id="name-error">
{$errors.name}
</p>
{/if}
</div>
<div class="sm:col-span-2">
<label
for="country"
class="block text-sm font-medium leading-6 text-gray-900"
>País de residencia</label
>
<div class="mt-2">
<select
id="country"
name="country"
autocomplete="country"
class="block w-full rounded-md border-0 py-1.5 pr-10 {$errors.country
? 'text-red-900 placeholder:text-red-300 ring-red-300 focus:ring-red-500'
: 'text-gray-900 ring-gray-300 focus:ring-primary-500'} ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6"
placeholder="Nico sweif"
aria-invalid={$errors.country != undefined}
aria-describedby={$errors.country != undefined
? "country-error"
: ""}
data-invalid={$errors.country}
bind:value={$form.country}
{...$constraints.country}
>
<option value="CO">Colombia</option>
<option value="ES">Spain</option>
</select>
{#if $errors.country}
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3"
>
<svg
class="h-5 w-5 text-red-500"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"
/>
</svg>
</div>
{/if}
</div>
{#if $errors.country}
<p class="mt-2 text-sm text-red-600" id="email-error">
{$errors.country}
</p>
{/if}
</div>
<div class="sm:col-span-2">
<label
for="phone"
class="block text-sm font-medium leading-6 text-gray-900"
>Telefono</label
>
<div class="mt-2 flex justify-between">
<PhoneInput
bind:value={$form.phone}
bind:valid={phoneValid}
selectedCountry={'CO'}
options={{autoPlaceholder: true, spaces: true}}
/>
{#if $errors.phone}
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3"
>
<svg
class="h-5 w-5 text-red-500"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"
/>
</svg>
</div>
{/if}
</div>
{#if $errors.phone}
<p class="mt-2 text-sm text-red-600" id="email-error">
{$errors.phone}
</p>
{/if}
</div>
<div>
<label
for="email"
class="block text-sm font-medium leading-6 text-gray-900"
>Email</label
>
<div class="relative mt-2 rounded-md shadow-sm">
<input
type="email"
name="email"
id="email"
class="block w-full rounded-md border-0 py-1.5 pr-10 {$errors.email
? 'text-red-900 placeholder:text-red-300 ring-red-300 focus:ring-red-500'
: 'text-gray-900 ring-gray-300 focus:ring-primary-500'} ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6"
placeholder="you@example.com"
aria-invalid={$errors.email != undefined}
aria-describedby={$errors.email != undefined ? "email-error" : ""}
autocomplete="email"
data-invalid={$errors.email}
bind:value={$form.email}
{...$constraints.email}
/>
{#if $errors.email}
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3"
>
<svg
class="h-5 w-5 text-red-500"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"
/>
</svg>
</div>
{/if}
</div>
{#if $errors.email}
<p class="mt-2 text-sm text-red-600" id="email-error">
{$errors.email}
</p>
{/if}
</div>
<div>
<label
for="password"
class="block text-sm font-medium leading-6 text-gray-900"
>Contraseña</label
>
<div class="mt-2">
<input
id="password"
name="password"
type="password"
class="block w-full rounded-md border-0 py-1.5 pr-10 {$errors.password
? 'text-red-900 placeholder:text-red-300 ring-red-300 focus:ring-red-500'
: 'text-gray-900 ring-gray-300 focus:ring-primary-500'} ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6"
aria-invalid={$errors.password != undefined}
aria-describedby={$errors.password != undefined
? "password-error"
: ""}
data-invalid={$errors.password}
bind:value={$form.password}
{...$constraints.password}
/>
{#if $errors.password}
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3"
>
<svg
class="h-5 w-5 text-red-500"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"
/>
</svg>
</div>
{/if}
</div>
{#if $errors.password}
<p class="mt-2 text-sm text-red-600" id="password-error">
{$errors.password}
</p>
{/if}
</div>
<div>
<label
for="passwordConfirmation"
class="block text-sm font-medium leading-6 text-gray-900"
>Confirmar Contraseña</label
>
<div class="mt-2">
<input
id="passwordConfirmation"
name="passwordConfirmation"
type="password"
class="block w-full rounded-md border-0 py-1.5 pr-10 {$errors.passwordConfirmation
? 'text-red-900 placeholder:text-red-300 ring-red-300 focus:ring-red-500'
: 'text-gray-900 ring-gray-300 focus:ring-primary-500'} ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6"
aria-invalid={$errors.passwordConfirmation != undefined}
aria-describedby={$errors.passwordConfirmation != undefined
? "password-error"
: ""}
data-invalid={$errors.passwordConfirmation}
bind:value={$form.passwordConfirmation}
{...$constraints.passwordConfirmation}
/>
{#if $errors.passwordConfirmation}
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3"
>
<svg
class="h-5 w-5 text-red-500"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"
/>
</svg>
</div>
{/if}
</div>
{#if $errors.passwordConfirmation}
<p class="mt-2 text-sm text-red-600" id="password-error">
{$errors.passwordConfirmation}
</p>
{/if}
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input
id="remember-me"
name="remember-me"
type="checkbox"
class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600"
/>
<label for="remember-me" class="ml-2 block text-sm text-gray-900"
>Recordar me</label
>
</div>
<div class="text-sm">
<a
href="#"
class="font-medium text-primary-600 hover:text-primary-500"
>Olvidaste tu contraseña?</a
>
</div>
</div>
<div>
<button
class="flex w-full justify-center rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"
>Sign up</button
>
</div>
</form>
<!--
<div class="mt-6">
<div class="relative">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300" />
</div>
<div class="relative flex justify-center text-sm">
<span class="bg-white px-2 text-gray-500">Or continue with</span>
</div>
</div>
<div class="mt-6 grid grid-cols-3 gap-3">
<div>
<a
href="#"
class="inline-flex w-full justify-center rounded-md bg-white px-4 py-2 text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-offset-0"
>
<span class="sr-only">Sign in with Facebook</span>
<svg
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M20 10c0-5.523-4.477-10-10-10S0 4.477 0 10c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V10h2.54V7.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V10h2.773l-.443 2.89h-2.33v6.988C16.343 19.128 20 14.991 20 10z"
clip-rule="evenodd"
/>
</svg>
</a>
</div>
<div>
<a
href="#"
class="inline-flex w-full justify-center rounded-md bg-white px-4 py-2 text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-offset-0"
>
<span class="sr-only">Sign in with Twitter</span>
<svg
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
aria-hidden="true"
>
<path
d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"
/>
</svg>
</a>
</div>
<div>
<a
href="#"
class="inline-flex w-full justify-center rounded-md bg-white px-4 py-2 text-gray-500 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-offset-0"
>
<span class="sr-only">Sign in with GitHub</span>
<svg
class="h-5 w-5"
fill="currentColor"
viewBox="0 0 20 20"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
clip-rule="evenodd"
/>
</svg>
</a>
</div>
</div>
</div>
-->
</div>
</div>
and for the phoneInput component, I've basically copied and pasted your advanced phone input.
<script lang="ts">
import "svelte-tel-input/styles/flags.css";
import { createEventDispatcher } from 'svelte';
import { TelInput, normalizedCountries, isSelected, clickOutsideAction } from "svelte-tel-input";
import type {
NormalizedTelNumber,
CountrySelectEvents,
CountryCode,
E164Number,
TelInputOptions
} from 'svelte-tel-input/types';
export let clickOutside = true;
export let closeOnClick = true;
export let disabled = false;
// Disabled in favour of enabled autoPlaceholder.
// export let placeholder: string | null = null;
export let parsedTelInput: NormalizedTelNumber | null = null;
export let value: E164Number | null;
export let searchPlaceholder: string | null = 'Search';
let searchText = '';
export let selectedCountry: CountryCode | null;
let isOpen = false;
export let valid: boolean;
export let options: TelInputOptions;
$: selectedCountryDialCode =
normalizedCountries.find((el) => el.iso2 === selectedCountry)?.dialCode || null;
const toggleDropDown = (e?: Event) => {
e?.preventDefault();
if (disabled) return;
isOpen = !isOpen;
};
const closeDropdown = (e?: Event) => {
if (isOpen) {
e?.preventDefault();
isOpen = false;
searchText = '';
}
};
const selectClick = () => {
if (closeOnClick) closeDropdown();
};
const closeOnClickOutside = () => {
if (clickOutside) {
closeDropdown();
}
};
$: filteredItems =
searchText && searchText.length > 0
? normalizedCountries
.filter((el) => el.label.toLowerCase().indexOf(searchText.toLowerCase()) >= 0)
.sort((a, b) => (a.label < b.label ? -1 : 1))
: normalizedCountries;
const handleSelect = (val: CountryCode, e?: Event) => {
if (disabled) return;
e?.preventDefault();
if (
selectedCountry === undefined ||
selectedCountry === null ||
(typeof selectedCountry === typeof val && selectedCountry !== val)
) {
selectedCountry = val;
onChange(val);
selectClick();
} else {
dispatch('same', { option: val });
selectClick();
}
};
const dispatch = createEventDispatcher<CountrySelectEvents<CountryCode>>();
const onChange = (selectedCountry: CountryCode) => {
dispatch('change', { option: selectedCountry });
};
</script>
<div
class="flex relative rounded-lg {valid
? ``
: ` ring-red-500 dark:ring-red-500 ring-1 focus-within:ring-offset-2 focus-within:ring-offset-pink-500/50 focus-within:ring-2`}"
>
<div class="flex" use:clickOutsideAction={closeOnClickOutside}>
<button
id="states-button"
data-dropdown-toggle="dropdown-states"
class="relative flex-shrink-0 overflow-hidden z-10 whitespace-nowrap inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-500 bg-gray-100 border border-gray-300 rounded-l-lg hover:bg-gray-200 focus:outline-none dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-white dark:border-gray-600"
type="button"
role="combobox"
aria-controls="dropdown-countries"
aria-expanded="false"
aria-haspopup="false"
on:click={toggleDropDown}
>
{#if selectedCountry && selectedCountry !== null}
<div class="inline-flex items-center text-left">
<span class="flag flag-{selectedCountry.toLowerCase()} flex-shrink-0 mr-3" />
<span class=" text-gray-600 dark:text-gray-400">+{selectedCountryDialCode}</span
>
</div>
{:else}
Please select
{/if}
<svg
aria-hidden="true"
class="ml-1 w-4 h-4 {isOpen ? 'rotate-180' : ''}"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
</button>
{#if isOpen}
<div
id="dropdown-countries"
class="absolute z-10 max-w-fit bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700 overflow-hidden translate-y-11"
data-popper-reference-hidden=""
data-popper-escaped=""
data-popper-placement="bottom"
aria-orientation="vertical"
aria-labelledby="country-button"
tabindex="-1"
>
<div
class="text-sm text-gray-700 dark:text-gray-200 max-h-48 overflow-y-auto"
aria-labelledby="countries-button"
role="listbox"
>
<input
aria-autocomplete="list"
type="text"
class="px-4 py-2 text-gray-900 focus:outline-none w-full sticky top-0"
bind:value={searchText}
placeholder={searchPlaceholder}
/>
{#each filteredItems as country (country.id)}
{@const isActive = isSelected(country.iso2, selectedCountry)}
<div id="country-{country.iso2}" role="option" aria-selected={isActive}>
<button
value={country.iso2}
type="button"
class="inline-flex py-2 px-4 w-full text-sm hover:bg-gray-100 dark:hover:bg-gray-600
active:bg-gray-800 dark:active:bg-gray-800 overflow-hidden
{isActive
? 'bg-gray-600 dark:text-white'
: 'dark:hover:text-white dark:text-gray-400'}"
on:click={(e) => {
handleSelect(country.iso2, e);
}}
>
<div class="inline-flex items-center text-left">
<span
class="flag flag-{country.iso2.toLowerCase()} flex-shrink-0 mr-3"
/>
<span class="mr-2">{country.name}</span>
<span class="text-gray-500">+{country.dialCode}</span>
</div>
</button>
</div>
{/each}
</div>
</div>
{/if}
</div>
<TelInput
id="tel-input"
bind:country={selectedCountry}
bind:parsedTelInput
bind:value
bind:valid
{options}
class="text-sm rounded-r-lg block w-full p-2.5 focus:outline-none border border-gray-300 border-l-gray-100 dark:border-l-gray-700 dark:border-gray-600 bg-gray-50 dark:bg-gray-700
dark:placeholder-gray-400 dark:text-white text-gray-900"
/>
</div>
I've left the deployed version https://sweif.pages.dev/signup
and I've left a console log statement for the phone number.
right on submit it's transformed to an empty string.
happy to invite you to the repo if you need.
(I've disabled validations on the phone number for now, so that users can signup, but you can see in the console that the phone number is just an empty string).
also I didn't say it enough, but thanks again for creating this repo, it's amazing!
happysalada commented
ok, I've finally figured it out.
The original input needs to have a name.
Thanks again for the great lib!