Promises not behaving deterministically, how can I debug

[danieltroger]

async function something(a){
  const p = Promise.resolve();
  await p;
  console.log(a)
}
something(1);
something(2);

So as far as I know above should deterministically print 1, 2, however I have a weird case where it is reversed.
It is however in a huge codebase and I spent the last 2 hours narrowing it down to this.
I'm using babel to transpile and it only happens in IE11.
When running the transpiled version in a modern browser it works correctly, therefore I think something might be wrong with the core-js Promise implementation.

How can I figure out how to reproduce this simpler?
Removing code by code and transpiling, bundling, uploading and reloading in IE11 would be a huge pain in the ass.
Is there some explanation of how the async to generator and Promise polyfills work and how to debug them?

How does core-js queue to react to promises in the next tick?
It only happens sometimes in IE11 with the same code so I think it depends on what has happened before.

It might also be a mistake on my side but I don't think so. One line calls a function and the next line calls the same function. That function only contains one await statement which is a promise gotten from Promise.resolve(). And the code after the await statement is being executed in reversed order than the calling functions 😕

[zloirock]

The code of microtask implementation you could find here. The order is tested. Async functions come from the transpiler. Most likely it is an issue on your side, without a reproducible example, I can't say more.

[danieltroger]

Ok thanks. OMG I am happy AF, I narrowed it down the painful way and did not find an issue on my side. Hopefully reproducible example if it's not swc, parcel or babel messing it up:

import "core-js/features/promise/index";

main();

async function main() {
  const fn1 = the_thing();
  const fn2 = the_thing();
  fn2(1);
  fn1(2);
}

function the_thing() {
  const resolved_promise = Promise.resolve();
  return async value => {
    console.log("Function for", value, "is awaiting resolved promise");
    await resolved_promise;
    console.log("Function for", value, "continued");
  };
}

Feel free to try it out while I'm opening an issue 👯‍♂️🎶✨

[danieltroger]

Yeah I figured out the queueMicrotask is the MutationObserver example because this is instanceof MutationObserver in the lowest call stack frame, but I narrowed it down by removing code

[zloirock]

Since async functions are not supported in IE11 and transpilers can generate different code - transpiled example or example with transpiler settings expected.

[danieltroger]

Great, gave you both. Please see #1026 :)

[zloirock]

Thanks, I'll chack when I'll have time.