Alpine Expression Error: Q.map is not a function

[a-zog]

Thank you very much for this package, I've encountered an error:

Alpine Expression Error: Q.map is not a function

near createMap() function at this line:

if (this.map = Q.map(f, this.config.controls),

A preview of the code used:

Map::make('location')
    ->label('Location')
    ->columnSpanFull()
    ->afterStateUpdated(function (Get $get, Set $set, ?array $state, $livewire): void {
        $set('lat', $state['lat']);
        $set('long', $state['lng']);
    })
    ->afterStateHydrated(function ($state, $record, Set $set, $livewire): void {
        $set('location', ['lat' => 54.633, 'lng' => -3.432]);
    })
    ->liveLocation()
    ->showMarker()
    ->markerColor('#111')
    ->draggable()
    ->tilesUrl("http://tile.openstreetmap.de/{z}/{x}/{y}.png")
    ->zoom(15)
    ->extraTileControl([])
    ->extraControl([
        'zoomDelta' => 1,
        'zoomSnap' => 2,
    ]);

Any tips on how to solve this issue please?

[mohaphez]

Hi Ahmed,

I'm not sure why this happened. Which version of Filament are you using? After installing, have you tried these commands?

php artisan filament:assets
php artisan optimize:clear

[a-zog]

Using filament/filament v3.2.62, just checked Leaflet quick start and they mention an L.map instead of a Q.map or are you using a different approach?

[gsusanj]

Since composer update happening the same to me as well (worked fine before)

Further investigating the issue, it seems my issue is not related to updated dependencies but inclusion of Tailwind Elements. Now I have included the library as a separate script file and for unknown reason works fine.

[mohaphez]

What do you mean by 'included the library as a separate script file'? Can you clarify?

Yesterday, after reporting the issue, I installed the package in a fresh project, and it worked flawlessly. The entire map loaded without any problems.

I'm still trying to identify the issue.

[gsusanj]

Its an old project that I am updating, most scripts are plain old jQuery, but I have started the transition to Tailwind and Filament. If I include the script Tailwind Elements within the javacsript file with jQuery scripts (and process it with vite), I get that error. Now I have created a new file, included the Tailwind Elements script in that separate file and process it with vite, I get no error.

Did you try to test it with the Tailwind Elements? https://tw-elements.com/docs/standard/getting-started/quick-start/

I do not know what the OP cause of this is, but I identified this script as a cause. Maybe simply compatibility issue between that and your script?

I do know that Vite is doing some sort of walling in individual javascript files but any kind of JS processing is way out of my expertise unfortunately.

[a-zog]

Hi @mohaphez the issue doesn't seem to be resolved;

However, I was able to trace the issue to filament-map-picker-scripts.js. and by replacing "Q." occurrences with "L.", it was fixed.

is there a way to skip/fix this line in the package?

var Q = Qo(gn(), 1);

Thanks

[mohaphez]

Hi @a-zog

actually, I'm unsure of the origin of this issue on your end. :( I've installed it on a clean project without encountering any errors.

Regarding the item you mentioned about 'Q.', it's included in the build file.

The only JavaScript file that's been developed and built is available at this link, where 'Q.' is not present.

It's possible that other JavaScript libraries or plugins might have caused this interference.