Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hello everyone. I faced such a problem that when using several password components, I get an error:
Uncaught (in promise) RangeError: Maximum call stack size exceeded
chunk-U3LI7FBV.js?v=f66f6b64:2265 Uncaught (in promise) RangeError: Maximum call stack size exceeded at callWithErrorHandling (chunk-U3LI7FBV.js?v=f66f6b64:2265:5) at callWithAsyncErrorHandling (chunk-U3LI7FBV.js?v=f66f6b64:2270:17) at callWithAsyncErrorHandling (chunk-U3LI7FBV.js?v=f66f6b64:2281:19) at callHook (chunk-U3LI7FBV.js?v=f66f6b64:5707:3) at applyOptions (chunk-U3LI7FBV.js?v=f66f6b64:5625:5) at finishComponentSetup (chunk-U3LI7FBV.js?v=f66f6b64:10096:7) at setupStatefulComponent (chunk-U3LI7FBV.js?v=f66f6b64:10019:5) at setupComponent (chunk-U3LI7FBV.js?v=f66f6b64:9944:36) at mountComponent (chunk-U3LI7FBV.js?v=f66f6b64:7300:7) at processComponent (chunk-U3LI7FBV.js?v=f66f6b64:7266:9)
<script setup lang="ts">
import AppLayout from '@/layouts/AppLayout.vue';
import SettingsLayout from '@/layouts/settings/Layout.vue';
import { TransitionRoot } from '@headlessui/vue';
import { Head, useForm } from '@inertiajs/vue3';
import { ref, reactive } from 'vue';
import HeadingSmall from '@/components/HeadingSmall.vue';
import { type BreadcrumbItem } from '@/types';
const breadcrumbItems: BreadcrumbItem[] = [
{
title: 'Password settings',
href: '/settings/password',
},
];
const passwordInput = ref<HTMLInputElement | null>(null);
const currentPasswordInput = ref<HTMLInputElement | null>(null);
const form = reactive(useForm({
current_password: '',
password: '',
password_confirmation: '',
}));
const updatePassword = () => {
form.put(route('password.update'), {
preserveScroll: true,
onSuccess: () => {
setTimeout(() => form.reset(), 0);
},
onError: (errors: any) => {
if (errors.password) {
form.reset('password', 'password_confirmation');
if (passwordInput.value instanceof HTMLInputElement) {
passwordInput.value?.$el.focus();
}
}
if (errors.current_password) {
form.reset('current_password');
if (currentPasswordInput.value instanceof HTMLInputElement) {
currentPasswordInput.value?.$el.focus();
}
}
},
});
};
</script>
<template>
<AppLayout :breadcrumbs="breadcrumbItems">
<Head title="Password settings" />
<SettingsLayout>
<div class="space-y-6">
<HeadingSmall title="Update password" description="Ensure your account is using a long, random password to stay secure" />
<form @submit.prevent="updatePassword" class="space-y-6">
<div class="grid gap-2">
<label for="current_password">Current password</label>
<Password
id="current_password"
ref="currentPasswordInput"
v-model="form.current_password"
:invalid="!!form.errors.current_password"
:style="{ width: '100%' }"
:inputStyle="{ width: '100%' }"
:feedback="false"
toggleMask
type="password"
class="mt-1 block w-full"
autocomplete="current-password"
placeholder="Current password"
/>
<Message v-if="form.errors.current_password" severity="error" size="small" variant="simple">{{ form.errors.current_password }}</Message>
</div>
<div class="grid gap-2">
<label for="password">New password</label>
<Password
id="password"
ref="passwordInput"
v-model="form.password"
:invalid="!!form.errors.password"
:style="{ width: '100%' }"
:inputStyle="{ width: '100%' }"
:feedback="false"
toggleMask
type="password"
class="mt-1 block w-full"
autocomplete="new-password"
placeholder="New password"
/>
<Message v-if="form.errors.password" severity="error" size="small" variant="simple">{{ form.errors.password }}</Message>
</div>
<div class="grid gap-2">
<label for="password_confirmation">Confirm password</label>
<Password
id="password_confirmation"
v-model="form.password_confirmation"
:invalid="!!form.errors.password_confirmation"
:style="{ width: '100%' }"
:inputStyle="{ width: '100%' }"
:feedback="false"
toggleMask
type="password"
class="mt-1 block w-full"
autocomplete="password-confirmation"
placeholder="Confirm password"
/>
<Message v-if="form.errors.password_confirmation" severity="error" size="small" variant="simple">{{ form.errors.password_confirmation }}</Message>
</div>
<div class="flex items-center gap-4">
<Button type="submit" label="Save password" :disabled="form.processing" />
<TransitionRoot
:show="form.recentlySuccessful"
enter="transition ease-in-out"
enter-from="opacity-0"
leave="transition ease-in-out"
leave-to="opacity-0"
>
<p class="text-sm text-neutral-600">Saved</p>
</TransitionRoot>
</div>
</form>
</div>
</SettingsLayout>
</AppLayout>
</template>
What could be the reason? Thank you in advance!
Once after I wrote the issue, I tried to import the password component manually - it solved the problem. Although I use plugins for auto-import:
"devDependencies": {
"@primevue/auto-import-resolver": "^4.3.1",
"unplugin-vue-components": "^0.27.3",
},
Please or to participate in this conversation.