file_exists(): File name is longer than the maximum allowed path length on this platform (4096)

[diegoanso]

I get the following exception when a select is validated, does not meet the validation and so puts the select in red with the validation text 'The x field is required' ('selectModel'=>'required'):

file_exists(): File name is longer than the maximum allowed path length on this platform (4096): /var/www/vhosts/test.co.uk/test.co.uk/resources/views/<div class=""> <div class="relative rounded-md shadow-sm "> <div :class="{ 'pointer-events-none': config/readonly, 'cursor-pointer': !config/readonly, }"> <template x-if="!config/multiselect"> <div class="absolute left-0 inset-y-0 w-[calc(100%-3/5rem)] flex items-center pl-3/5" x-on:click="toggle"> <span class="truncate text-sm text-secondary-700 dark:text-secondary-400" x-show="!isEmpty()" x-html="getSelectedDisplayText()"> </span> </div> </template> <template x-if="config/multiselect"> <div class="absolute inset-y-0 left-0 flex w-full items-center overflow-hidden pl-3 pr-14" x-on:click="toggle"> <div class="flex items-center gap-2 overflow-x-auto hide-scrollbar"> <span class="inline-flex text-sm text-secondary-700 dark:text-secondary-400" x-show="selectedOptions/length" x-text="selectedOptions/length"> </span> <div class="flex flex-nowrap items-center gap-1" wire:ignore> <template x-for="(option, index) in selectedOptions" :key="selected/${index}"> <span class="inline-flex items-center rounded-full border border-secondary-200 bg-secondary-100 py-0/5 pl-2 pr-0/5 text-xs font-medium text-secondary-700 shadow-sm dark:border-none dark:bg-secondary-700 dark:text-secondary-400"> <span class="truncate" style="max-width: 5rem" x-text="option/label"></span> <button class="flex h-4 w-4 shrink-0 items-center justify-center text-secondary-400 hover:text-secondary-500" x-on:click/stop="unSelect(option)" tabindex="-1" type="button"> <svg class="h-3 w-3" xmlns="http://www/w3/org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </span> </template> </div> </div> </div> </template> </div> <input type="text" autocomplete="disabled" class="text-negative-900 dark:text-negative-600 placeholder-negative-300 dark:placeholder-negative-500 border border-negative-300 focus:ring-negative-500 focus:border-negative-500 dark:bg-secondary-800 dark:border-negative-600 form-input block w-full sm:text-sm rounded-md transition ease-in-out duration-100 focus:outline-none shadow-sm pr-8 !dark:text-transparent cursor-pointer overflow-hidden !text-transparent selection:bg-transparent" x-ref="input" x-on:click="toggle" x-on:focus="open" x-on:blur/debounce/750ms="closeIfNotFocused" x-on:keydown/enter/stop/prevent="toggle" x-on:keydown/space/stop/prevent="toggle" x-on:keydown/arrow-down/prevent="$event/shiftKey || getNextFocusable()/focus()" x-on:keydown/arrow-up/prevent="getPrevFocusable()/focus()" x-bind:placeholder="getPlaceholder" x-bind:value="getSelectedValue" inputmode="none" name="person/management_org_id" id="22056565544999505a408c70e3773d6d" /> <div class="absolute inset-y-0 right-0 flex items-center gap-x-2 pr-2"> <button x-show="!isEmpty()" x-on:click="clear" tabindex="-1" type="button" x-cloak> <svg class="h-4 w-4 text-secondary-400 hover:text-negative-400" xmlns="http://www/w3/org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> <button tabindex="-1" x-on:click="toggle" type="button"> <svg class="text-negative-400 dark:text-negative-600 h-5 w-5" xmlns="http://www/w3/org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4" /> </svg> </button> </div> </div> <p class="mt-2 text-sm text-negative-600"> The management org id field is required/ </p> </div>.blade.php

It happens only in my production server. on localhost works as intended as shown in the picture below:

Dependencies
"laravel/framework": "^10.10",
"livewire/livewire": "^2.11",
"wireui/wireui": "^1.17"

Desktop:

• OS: CentOS Linux
• Browser: all browsers

I found the same issue here, here and here but they do not seem to fix it completely. From what I've seen is not a WireUi problem , its Laravels but it looks they have not fixed it yet. I'll be posting this issue in laravel as well I just want to make this aware cause i know version 2 is coming and in case someone offers a better solution than mine which was to delete the following code from the select component so its not so large:

<button tabindex="-1" x-on:click="toggle" type="button">
						<x-dynamic-component
							class="{{ $name && $errors->has($name) ? 'text-negative-400 dark:text-negative-600' : 'text-secondary-400' }} h-5 w-5"
							:component="WireUi::component('icon')" :name="$rightIcon" />
					</button>