How to make await calls in init()?

[eric-hansen]

I've tried Googling this for a while and attempting a few different things, but nothing seems to work.

I have some Promises I need to resolve for x-init, so I created a x-data="{ init() { .... } }" on the div.

The things I can remember trying for this are:

• async init () { ... }
• init: async function () { ... }
• creating an async function and then setting x-init="async someFunc"

Nothing seems to work, so I'm not sure if I'm doing this wrong or if it's just not possible. If it's not, then how can I resolve the promises without suffering from callback hell?

[SimoTod]

Can you share the code to show what you are trying to do. Init functions support await but I suspect you mean something else (like you want other directives to wait for init)?

Simple example of await in x-init: https://codepen.io/SimoTod/pen/jOgLjqp

[eric-hansen]

Here's what I'm trying to do right now (Alpine + Livewire/Laravel):

<div
    x-data="{
        map,
        markers: [{
            lat: @js($location->latitude()),
            lng: @js($location->longitude()),
        }],
        markerHandler,
        placeMarkers () {
            console.log(this.markerHandler);
        },
        initMap() {
            let m;
            let bounds;
            let mapEl = this.$refs.map;

            let center = { ...this.markers[0] };

            google.maps.importLibrary('maps').then((MapsLibrary) => {
                let Map = MapsLibrary.Map;

                this.map = new Map(mapEl, {
                    center: center,
                    zoom: 8,
                    mapId: 'demoIdMapYall',
                    scaleControl: true
                });

                let that = this;

                google.maps.importLibrary('marker').then((MarkerLibrary) => {
                    that.markerHandler = MarkerLibrary.AdvancedMarkerElement;
console.log('that.markerHandler', that.markerHandler);
                    placeMarkers();
                });
            });
       }
    }"
    x-init="await initMap()"
wire:ignore>
</div>

And I get this error:

Uncaught ReferenceError: initMap is not defined

This is at the await initMap() call. I know I don't need the callback hell in initMap() but that's how it was working and so I just did the above to see if I could get past the "not defined" error I keep having.

I also get the same error when I do async initMap() in x-data (which I forgot to add originally).

[ekwoka]

just making init async works fine.

[eric-hansen]

How so? I'm wondering if I'm doing it wrong somehow (I'm more of a backend dev but need to do this for Google Maps integration).

[eric-hansen]

For example, here's what I'm trying to do right now (Alpine + Livewire/Laravel):

<div
    x-data="{
        map,
        markers: [{
            lat: @js($location->latitude()),
            lng: @js($location->longitude()),
        }],
        markerHandler,
        placeMarkers () {
            console.log(this.markerHandler);
        },
        initMap() {
            let m;
            let bounds;
            let mapEl = this.$refs.map;

            let center = { ...this.markers[0] };

            google.maps.importLibrary('maps').then((MapsLibrary) => {
                let Map = MapsLibrary.Map;

                this.map = new Map(mapEl, {
                    center: center,
                    zoom: 8,
                    mapId: 'demoIdMapYall',
                    scaleControl: true
                });

                let that = this;

                google.maps.importLibrary('marker').then((MarkerLibrary) => {
                    that.markerHandler = MarkerLibrary.AdvancedMarkerElement;
console.log('that.markerHandler', that.markerHandler);
                    placeMarkers();
                });
            });
       }
    }"
    x-init="await initMap()"
wire:ignore>
</div>

And I get this error:

Uncaught ReferenceError: initMap is not defined

This is at the await initMap() call. I know I don't need the callback hell in initMap() but that's how it was working and so I just did the above to see if I could get past the "not defined" error I keep having.

I also get the same error when I do async initMap() in x-data (which I forgot to add originally).

[ekwoka]

how about just async init() { //do stuff }?

you don't need the x-init either.

strange that its saying it's not defined though...

is the x-data failing to evaluate?

when I test it the x-data is failing. That's the problem. Once that fails, the init fails (of course)

[eric-hansen]

That would give me the same error.

x-data isn't failing to evaluate for me, but I'm also using Livewire/Laravel @js() to transform data, which may be why it fails for you.

I did get it working though, with this being the final result:

<div
    x-data="{
        map,
        markers: [{
            lat: @js($location->latitude()),
            lng: @js($location->longitude()),
        }],
        markerHandler,
        placeMarkers () {
            // console.log(this.markerHandler);
        },
        init: async function () {
            let m;
            let bounds;
            let mapEl = this.$refs.map;

            let center = { ...this.markers[0] };

            const { Map } = await google.maps.importLibrary('maps');

            this.map = new Map(mapEl, {
                center: center,
                zoom: 8,
                mapId: 'demoIdMapYall',
                scaleControl: true
            });

            const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');

            // this.markerHandler = AdvancedMarkerElement;

            placeMarkers();
       }
    }"
wire:ignore>
</div>

Basically I add define it as init: async function () { // ... }

[ekwoka]

I had removed that part, the map and stuff were failing.

once I fixed those references, the init worked fine.

init: async function () { // ... }

You can just do async init() { }