wireui_select is not defined on Select Component

[abbasmashaddy72]

In My View Only Select is not working, whereas Native Select is working Fine.

Describe the bug Unable to Use x-select

To Reproduce Steps to reproduce the behavior: 1) Followed Installation Steps 2) Added wireui Scripts above livewirescripts and livewire-ui-modal first time 3) Added wireui Scripts above livewirescripts and livewire-ui-modal second time 4) Added wireui Scripts above vite as using vite

Expected behavior Same As that of Async Search Link

Screenshots or Videos

Dependencies

• WireUI Version: 1.17
• Laravel Version: 9.19
• Alpine.js Version: 3.10.4
• Livewire Version: 2.10
• Lang: en_US

Desktop (If applicable, please complete the following information):

• OS: Linux
• Browser: Chrome
• Version 107.0.5304.87 (Official Build) (64-bit)

Additional context Console Log Report: saashms.test-1667023692866.log

[PH7-Jack]

Hi @abbasmashaddy72 Could you share the alpine script importing order?

[abbasmashaddy72]

Hi,

You are asking about app.js Right @PH7-Jack

It is

import './bootstrap';

import Alpine from "alpinejs";
import AlpineFloatingUI from '@awcodes/alpine-floating-ui'
import NotificationsAlpinePlugin from '../../../vendor/filament/notifications/dist/module.esm'
import flatpickr from "flatpickr";
import * as FilePond from "filepond";
import { createPopper } from "@popperjs/core";

Alpine.plugin(AlpineFloatingUI)
Alpine.plugin(NotificationsAlpinePlugin)

window.flatpickr = flatpickr;
window.FilePond = FilePond;
window.createPopper = createPopper;
window.Alpine = Alpine;

Alpine.start();

import '../../../vendor/wire-elements/modal/resources/js/modal';

import "./theme"

[abbasmashaddy72]

View

 <x-select label="Search an Area" wire:model.defer="area" placeholder="Select an Area" :async-data="route('api.area-search')"
            option-label="name" option-value="id" />

API Controller:

public function __invoke(Request $request): Collection
{
    return Area::query()->select('id', 'name')->orderBy('name')->when(
        $request->search,
        fn (Builder $query) => $query->where('name', 'like', "%{$request->search}%")
    )->when(
        $request->exists('selected'),
        fn (Builder $query) => $query->whereIn('id', $request->input('selected', [])),
        fn (Builder $query) => $query->limit(10)
    )->get()->map(function (Area $area) {
        return $area;
    });
}

Route:

Route::group(['namespace' => 'App\Http\Controllers\Api\Backend', 'as' => 'api.'], function () {
    Route::get('area-search', AreaSearchController::class)->name('area-search');
});

[joaopalopes24]

@abbasmashaddy72 Are you using Vite?

[PH7-Jack]

Closing it now. Check the wireui scripts importing orders. The wireui should be imported before the alpine.

https://livewire-wireui.com/docs/get-started#installation

[abbasmashaddy72]

@abbasmashaddy72 Are you using Vite?

Yes @joaopalopes24

Sorry for the late reply, My Laptop had some trouble so was not able to reply.

[joaopalopes24]

@abbasmashaddy72 Make sure your wireUI scripts import is before Vite import. Vite still has some bugs.

Example:

@livewireStyles()
@wireUiScripts()
@vite(['resources/css/app.css', 'resources/js/app.ts'])

[abbasmashaddy72]

Okay, I will Check it out and let you know

Thanks @joaopalopes24

[abbasmashaddy72]

@joaopalopes24

Working But Showing error

Livewire Entangle Error: Livewire property 'area' cannot be found

where area is my model name

UI Issue On Hover, Please Check the Below Image

[joaopalopes24]

But this is already a Livewire error, and from what I understand you are also using Vue. Could be conflict between Alpine and Vue.

[abbasmashaddy72]

I am Not Using Vue, It is Just the Extension in my Chrome For Vue DevTools