Open neondeex opened 4 hours ago
Could you provide the code or a reproduction?
Could you provide the code or a reproduction?
Copy pase of your component and this
Can I see the component code?
Oh totally forgot that i changed the index.ts since it was giving me a problem with root this is the current index
import type {
Country,
CountryCode,
DetailedValue,
E164Number,
TelInputOptions
} from 'svelte-tel-input/types';
import PhoneInputComponent from './phone-input.svelte';
export type Props = {
country?: CountryCode | null;
defaultCountry?: CountryCode | null;
el?: HTMLInputElement;
name?: string;
placeholder?: string;
disabled?: boolean;
readonly?: boolean;
class?: string;
value: E164Number | null;
valid?: boolean;
detailedValue?: Partial<DetailedValue> | null;
options?: TelInputOptions;
order?: ((a: Country, b: Country) => number) | undefined;
};
export const defaultOptions: TelInputOptions = {
spaces: true,
autoPlaceholder: false,
format: 'international'
};
export { PhoneInputComponent as default };
And when I use the default one I get this in console
ReferenceError: can't access lexical declaration 'Root' before initialization
<anonymous> index.ts:32
You would get that error because you are importing from the .svelte instead of index.ts
Try importing the component from 'lib/components/ui/phone-input'
The search code is in the .svelte can you send that as well
TypeError: __vite_ssr_import_13__.default is not a function
at children (/home/neonDev/dev/tdm/events360/src/routes/configurar-perfil/+page.svelte:231:37)
at Module.slot (/home/neonDev/dev/tdm/events360/node_modules/svelte/src/internal/server/index.js:415:3)
at Module.Card_content (/home/neonDev/dev/tdm/events360/src/lib/components/ui/card/card-content.svelte:25:24)
at children (/home/neonDev/dev/tdm/events360/src/routes/configurar-perfil/+page.svelte:103:27)
at Module.slot (/home/neonDev/dev/tdm/events360/node_modules/svelte/src/internal/server/index.js:415:3)
at Module.Card (/home/neonDev/dev/tdm/events360/src/lib/components/ui/card/card.svelte:25:24)
at $$render_inner (/home/neonDev/dev/tdm/events360/src/routes/configurar-perfil/+page.svelte:75:25)
at _page (/home/neonDev/dev/tdm/events360/src/routes/configurar-perfil/+page.svelte:882:3)
at children (/home/neonDev/dev/tdm/events360/.svelte-kit/generated/root.svelte:94:6)
at _layout (/home/neonDev/dev/tdm/events360/src/routes/+layout.svelte:11:11)
Now im getting this error and this is my component code
<script lang="ts">
import CountrySelector from './country-selector.svelte';
import { defaultOptions, type Props } from '.';
import { cn } from '$lib/utils';
import { TelInput, normalizedCountries } from 'svelte-tel-input';
import 'svelte-tel-input/styles/flags.css';
const countries = normalizedCountries;
type $$Props = Props;
let className: $$Props['class'] = undefined;
export let defaultCountry: $$Props['defaultCountry'] = null;
export let country: $$Props['country'] = defaultCountry;
export let options: $$Props['options'] = defaultOptions;
export let placeholder: $$Props['placeholder'] = undefined;
export let readonly: $$Props['readonly'] = false;
export let disabled: $$Props['disabled'] = false;
export let value: $$Props['value'] = null;
export let valid: $$Props['valid'] = false;
export let detailedValue: $$Props['detailedValue'] = null;
export let order: $$Props['order'] = undefined;
export let name: $$Props['name'] = undefined;
export { className as class };
let el: HTMLInputElement;
export const focus = () => {
// sort of an after update kinda thing
setTimeout(() => {
el.focus();
}, 0);
};
</script>
<div class="flex place-items-center">
<CountrySelector {order} {countries} bind:selected={country} on:select={focus} />
<TelInput
{...$$restProps}
{name}
bind:country
bind:detailedValue
bind:value
bind:valid
bind:readonly
bind:disabled
bind:placeholder
bind:el
{options}
required
class={cn(
'flex h-10 w-[212px] rounded-lg rounded-l-none border border-l-0 border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className
)}
/>
</div>
Sorry it's in the country selector code
<script lang="ts">
import * as Popover from '$lib/components/ui/popover';
import { Button } from '$lib/components/ui/button';
import * as Command from '$lib/components/ui/command';
import { ScrollArea } from '$lib/components/ui/scroll-area';
import { Check, ChevronsUpDown } from 'lucide-svelte';
import { cn } from '$lib/utils';
import Flag from './flag.svelte';
import { createEventDispatcher } from 'svelte';
import type { Country, CountryCode } from 'svelte-tel-input/types';
const dispatch = createEventDispatcher();
/** List of countries */
export let countries: Country[];
export let disabled = false;
export let selected: CountryCode | null = null;
/** Default ordering is alphabetical by country name supply this function to customize the sorting behavior */
export let order: (a: Country, b: Country) => number = (a, b) => {
return a.name.localeCompare(b.name);
};
$: selectedCountry = countries.find((a) => a.iso2 == selected);
let open = false;
const selectCountry = (country: Country) => {
selected = country.iso2;
open = false;
dispatch('select', selected);
};
</script>
<Popover.Root bind:open>
<Popover.Trigger asChild let:builder>
<Button
type="button"
variant="outline"
builders={[builder]}
class={cn('flex gap-1 rounded-e-none rounded-s-lg px-3')}
{disabled}
>
<Flag country={selectedCountry} />
<ChevronsUpDown class={cn('-mr-2 h-4 w-4 opacity-50', disabled ? 'hidden' : 'opacity-100')} />
</Button>
</Popover.Trigger>
<Popover.Content class="w-[300px] p-0">
<Command.Root>
<Command.Input placeholder="Search country..." />
<Command.List>
<ScrollArea class="h-72">
<Command.Empty>No country found.</Command.Empty>
<Command.Group>
{#each countries.sort(order) as country}
<Command.Item
class="gap-2"
value={country.name}
onSelect={() => selectCountry(country)}
>
<Flag {country} />
<span class="flex-1 text-sm">{country.name}</span>
<span class="text-sm text-foreground/50">
+{country.dialCode}
</span>
<div class="w-4">
{#if country.iso2 == selected}
<Check class="size-4" />
{/if}
</div>
</Command.Item>
{/each}
</Command.Group>
</ScrollArea>
</Command.List>
</Command.Root>
</Popover.Content>
</Popover.Root>
Nothing obvious just from looking at the code.
It may be a difference in the command component or a dependency of it all the searching is through that
But right now with the changes im just getting this error (importing the index) TypeError: __vite_ssr_import_13__.default is not a function at children (/home/neonDev/dev/tdm/events360/src/routes/configurar-perfil/+page.svelte:231:37) at Module.slot (/home/neonDev/dev/tdm/events360/node_modules/svelte/src/internal/server/index.js:415:3) at Module.Card_content (/home/neonDev/dev/tdm/events360/src/lib/components/ui/card/card-content.svelte:25:24) at children (/home/neonDev/dev/tdm/events360/src/routes/configurar-perfil/+page.svelte:103:27) at Module.slot (/home/neonDev/dev/tdm/events360/node_modules/svelte/src/internal/server/index.js:415:3) at Module.Card (/home/neonDev/dev/tdm/events360/src/lib/components/ui/card/card.svelte:25:24) at $$render_inner (/home/neonDev/dev/tdm/events360/src/routes/configurar-perfil/+page.svelte:75:25) at _page (/home/neonDev/dev/tdm/events360/src/routes/configurar-perfil/+page.svelte:882:3) at children (/home/neonDev/dev/tdm/events360/.svelte-kit/generated/root.svelte:94:6) at _layout (/home/neonDev/dev/tdm/events360/src/routes/+layout.svelte:11:11)
https://gyazo.com/1bbef3401ebea1766add533894007dd7