Uncaught TypeError: Cannot read properties of undefined (reading 'api')

[Piket564]

Describe the bug I put a select inside a modal (wire-elements/modal), but on loading the modal, in the console AlpineJS triggers an error:

scripts:2 Uncaught TypeError: Cannot read properties of undefined (reading 'api')
    at Proxy.syncProps (scripts:2:43459)
    at Proxy.init (scripts:2:40393)
    at app.js:471:23
    at evaluate (app.js:448:32)
    at app.js:2606:27
    at Function.<anonymous> (app.js:1166:55)
    at flushHandlers (app.js:560:46)
    at stopDeferring (app.js:565:5)
    at deferHandlingDirectives (app.js:568:3)
    at initTree (app.js:778:3)

Here the select:

<x-select
                    label="Utenti"
                    placeholder="Utenti assegnati"
                    :options="$users"
                    option-label="name"
                    option-value="id"
                    multiple="true"
                    wire:model.defer="sel_users"
                />

To Reproduce Steps to reproduce the behavior: Can't open the select. Single errror: Uncaught TypeError: Cannot read properties of undefined (reading 'api')

Expected behavior Open the modal.

Screenshots

Desktop (please complete the following information):

OS: Microsoft Windows 11 Pro - 10.0.22000 build 22000 Browser: Google Chrome Version 102.0.5005.115 Smartphone (please complete the following information):

None Additional context

None

[PH7-Jack]

@Piket564 It happens when using outside a wire-elements modal? The multiple="true" doest not take effect. The correct name is multiselect

[Piket564]

@PH7-Jack yes, outside wire-elements, and multiple="true" is a mystake, i've also tried with the example select, no results

[MltStephane]

I have the same issue.

The undefined property seems to be props.asyncData in the syncProps method (ts/components/select/index.ts) in my case.

[Piket564]

Yes, exactly. Same here, seems some errors with AlpineJs, I'm using webpack.mix.js:

require('./bootstrap');
//
import Alpine from 'alpinejs';
import lozad from 'lozad';
import lightGallery from 'lightgallery';
import lgThumbnail from 'lightgallery/plugins/thumbnail'
import lgZoom from 'lightgallery/plugins/zoom'
import lgMediumZoom from 'lightgallery/plugins/mediumZoom'
import lgFullscreen from 'lightgallery/plugins/fullscreen'
import lgAutoplay from 'lightgallery/plugins/autoplay'
import lgShare from 'lightgallery/plugins/share'
import lgVideo from 'lightgallery/plugins/video'
import axios from 'axios'

window.Alpine = Alpine;

Alpine.start();

const observer = lozad();
observer.observe();

[MltStephane]

I'm using laravel-vite, the latest version of wireui, livewire v2.10.6, alpinejs v3.10.2

[Piket564]

Currently I'm using Laravel Mix with:

├── @tailwindcss/aspect-ratio@0.4.0
├── @tailwindcss/forms@0.4.1
├── @tailwindcss/typography@0.5.2
├── alpinejs@3.10.2
├── autoprefixer@10.4.5
├── axios@0.25.0
├── flowbite@1.4.7
├── laravel-mix@6.0.49
├── lightgallery@2.5.0
├── lodash@4.17.21
├── lozad@1.16.0
├── postcss-import@14.1.0
├── postcss@8.4.14
└── tailwindcss@3.1.4

Npm: 8.9.0 Node: 17.7.1

Do you suggest to go with laravel-vite?

[saulens22]

Deleting resources/views/vendor/wireui folder helped me. Package was updated, but publish command doesn't overwrite existing 'old' components.

[MltStephane]

I had the same problem in another project, with almost the same packages. It happened after the wireui upgrade

I already tried to remove the published assets. It still doesn't work, I think this issue is related to a new version of another package (alpine ? livewire ?)

I downgraded to v1.5.0 for now (everything works fine in this version), next week I'll have more time to investigate.

[Piket564]

I had the same problem in another project, with almost the same packages. It happened after the wireui upgrade

I already tried to remove the published assets. It still doesn't work, I think this issue is related to a new version of another package (alpine ? livewire ?)

I downgraded to v1.5.0 for now (everything works fine in this version), next week I'll have more time to investigate.

Ok, i will downgrade to keep production "ok", feel free to ask me questions

[PH7-Jack]

@Piket564 Inside a wireui modal it works?

[Piket564]

@Piket564 Inside a wireui modal it works?

Haven't tried, will update the comment asap

[Piket564]

I tried wit v1.5.0 but still there are some errors:

Here the blade:

<x-select
label="Select Statuses"
placeholder="Select many statuses"
multiselect
:options="['Active', 'Pending', 'Stuck', 'Done']"
/>

This error is without WireUi Modal, i'm using a simple livewire page for this.

Edit: adding wire:model now it works properly.

[PH7-Jack]

@Piket564 If you are using an outdated wireui version, try updating to the latest version. Is the bug still happening in the latest wireui version? If did you publish the resources, will need to update them

[Piket564]

@Piket564 If you are using an outdated wireui version, try updating to the latest version. Is the bug still happening in the latest wireui version? If did you publish the resources, will need to update them

With 1.5 WireUi is working fine, i've also deleted the resources. With 1.7.0 the error persist

[PH7-Jack]

@Piket564 Try using this https://github.com/wireui/wireui/releases/tag/v1.12.1 If the error persist let me know, will be easier to find the bug

[MarceloZapatta]

I had the same issue when using select in a modal. But when removing resources/views/vendor/wireui the problem was fixed.

[PH7-Jack]

@Piket564 I'm closing this issue now, if your problem still persisting, tag me to reopen

[affektde]

Hello we have upgraded to version 1.15.0 and now some selects do not work.

We use latest Laravel Vite and our AlpineJs is loaded at the end of our app.js. This worked until now:

// lastly alpinejs
window.Alpine = Alpine
Alpine.plugin(mask)
Alpine.plugin(intersect)
Alpine.plugin(persist)
Alpine.plugin(focus)
Alpine.plugin(collapse)
Alpine.plugin(morph)
Alpine.start()

livewire_hot_reload();

And there is a problem with multiselect. multiselect is not defined in our HTML template. But the first item of the select ist preselected and if you choose another one, two are selected.

<x-select
            label="Catalog label"
            wire:model.debounce="state.label_id"
            placeholder="Select catalog label"
            :async-data="route('api.labels.options')"
            :template="[
                                    'name'   => 'user-option',
                                    'config' => ['src' => 'logo']
                                ]"
            option-label="name"
            option-value="id"
            :clearable="false"
            hint="Only record labels with track catalog prefix and release catalog prefix defined."
        />

This is also new and same code worked in older versions. Testing older versions now to verify.

[affektde]

Version 1.13.3 is the latest version working for us without problems. Higher versions produce screenshots above.

[saulens22]

@affektde Please try this: https://github.com/wireui/wireui/issues/344#issuecomment-1177236512

Also @PH7-Jack , maybe it should be documented? It happens quite frequently after updates if you have published blade views.

[gbrits]

Deleting resources/views/vendor/wireui folder helped me. Package was updated, but publish command doesn't overwrite existing 'old' components.

I had a different error:

Uncaught TypeError: Cannot read properties of undefined (reading 'interval')
    at Proxy.syncProps (scripts?id=3c15fb3b36f54e2baae1e97b6eb0015e:1:28995)
    at Proxy.init (scripts?id=3c15fb3b36f54e2baae1e97b6eb0015e:1:28286)
    at app.js?ver=2023-11-14:471:23
    at evaluate (app.js?ver=2023-11-14:448:32)
    at app.js?ver=2023-11-14:2662:27
    at Function.<anonymous> (app.js?ver=2023-11-14:1179:55)
    at flushHandlers (app.js?ver=2023-11-14:575:46)
    at stopDeferring (app.js?ver=2023-11-14:580:5)
    at deferHandlingDirectives (app.js?ver=2023-11-14:583:3)
    at initTree (app.js?ver=2023-11-14:792:3)

And taking your advice solved the problem:

rm -rf resources/views/vendor/wireui