Select Component options detected as null

[allanpusta13]

Options has value like previously on other versions was working.

Upon update options on dropdown is not rendering and errors occur like it said. "Uncaught TypeError: Cannot convert undefined or null to object"

Laravel 9 Latest WireUi

[PH7-Jack]

Are you using the latest alpinejs version?

[allanpusta13]

yes

[PH7-Jack]

Could you show me your select config? i.g <x-select .... />

[allanpusta13]

[allanpusta13]

[PH7-Jack]

@allanpusta13 if you use the WireUI example, does it's work?

<x-select
    label="Select Status"
    placeholder="Select one status"
    :options="[
        ['name' => 'Active',  'id' => 1],
        ['name' => 'Pending', 'id' => 2],
        ['name' => 'Stuck',   'id' => 3],
        ['name' => 'Done',    'id' => 4],
    ]"
    option-label="name"
    option-value="id"
    wire:model.defer="model"
/>

[allanpusta13]

Also tried it sir but it won't work

[PH7-Jack]

Could you set the default model value to null?

[allanpusta13]

I'll try

[allanpusta13]

it has the same error

[PH7-Jack]

Or try to delay the alpine starts, use the WireUI load hook to start the alpinejs, I think is something with the alpine js But, make sure if your wireui, alpine and livewire are updated, and the scripts are in the correct order in your layout https://livewire-wireui.com/docs/get-started

import Alpine from 'alpinejs'

window.Alpine = Alpine

window.Wireui.hook('load', () => Alpine.start())

[allanpusta13]

I tried it Sir but more errors came up

[Tiagospem]

@PH7-Jack same problem

[PH7-Jack]

Could you reproduce this error in a new project and put it on GitHub? Without the full context is hard to know what is firing this error

[allanpusta13]

@PH7-Jack Sir I have the sample here, cheers to your work and I love wireui, it would really help me a lot if this would be solved.

All in the composer packages are on their latest versions.

https://github.com/allanpusta13/wireui-select-component-bug

[PH7-Jack]

@allanpusta13 Good, looking at it now.

[allanpusta13]

Noted and looking forward to your feedback!

[PH7-Jack]

@allanpusta13 The bug only happens when the powergrid scripts is added to the layout

[allanpusta13]

@PH7-Jack so I have to remove the powergrid script on every form?

[PH7-Jack]

I understand this problem now. Your project was not configured properly with the PowerGrid See this guide Just configure correctly your project. WireUI + PG is a good choice https://livewire-powergrid.com/#/get-started/configure?id=_22-as-a-module

[PH7-Jack]

Remember to use the lastest Alpinejs version

[PH7-Jack]

[PH7-Jack]

Closing this issue now.

@allanpusta13 @Tiagospem Only for reference: This error happens because the alpine js is loaded in the script and in the PG CDN. Use only one of these. Import the pg scripts in the app.js module Is better to set the alpine_cdn to null

If this error still happening, tag me with the "RE-OPEN" comment.

[allanpusta13]

@PH7-Jack worked like a charm! Thanks so much for the tips and solution!

I didn't seem to try to config the powergrid previously because it was working well with the previous versions of wireui.

Again Thanks a lot!!!