Can't get async / wait to work in any form or shape within a custom viz

[Schizzomarino]

I am trying to animate a chart in subsequent steps in a custom visualisation but I could not get it to work, eventually I'd like to use await the promise from d3.transition.end() (d3 v5.7 with correct typing); but right now I'd be very happy to just see sync/await work in a Power BI

I have simplified the async call here to test and share (from a similar post here in the Power BI community ) I get no logs at all from the below), can anyone please tell me what I am doing wrong?

public update(options: VisualUpdateOptions) {

        function getPosts() {

            return new Promise((resolve, reject) => {

                setTimeout(() => {

                    console.log("Set Timeout");

                    resolve(1);

                }, 20);

            });

            } 

        async function init() { 

            console.log("Async function was started");

            await getPosts().then((result) => { console.log("Promise result received") });

        }

       (async () => {

            try {

                var text = await init();

                console.log("Some code after async call!");

            } catch (e) {}

        })();

}

Am I missing a library or something, should this not go in the Update function?
I have done research but I can't seem to find a solution.
I am using pbiviz 3.1.5

Thanks for any help you may provide,

Daniel

[luojiandan_bi]

It's great!I got the same error ago,but worked now.

thanks so much for @dm-p 

[dm-p · Accepted solution]

Hi @Schizzomarino,

Your code is definitely okay. Your issue appears to be with Webpack and no further configuration is required from creating a new visual other than ensuring that you have regenerator-runtime as a dependent package and referenced in your visual.ts.

I've made a simple Git repo that you can clone and take a look at if you want to validate or see any differences to your code, and I'll link the sections of code as prescribed. Essentially, you just need to do the following:

• Run npm i regenerator-runtime from the console so your dependencies are updated.
• In visual.ts, add import "regenerator-runtime/runtime"; underneath the import "core-js/stable"; statement.

I now get the following in my console with your code:

Hopefully this gets you moving though. Good luck!

Daniel

[Schizzomarino]

Oh wow, thanks so much for this Daniel!

Worked like a charm!

Now to start using generator functions right? 😄