Emspripten gives a multiple async error, while one call isn’t async

From JS I pass a callback to C++. C++ calls this JS callback asynchronously.

  • If the JS callback calls a synchronous function from C++, it works fine.
  • If the JS callback calls an asynchronous function, it works fine.
  • If I combine these two calls, it crashes. Even if I use await.

The error is: RuntimeError: Aborted(Assertion failed: Cannot have multiple async operations in flight at once)
I’ve not come across anyone who had this error under these circumstances.

C++:

#include <emscripten/bind.h>
#include <iostream>

using namespace std;

void async_func(emscripten::val func) { func().await(); }
void sync_func() {}

EMSCRIPTEN_BINDINGS(async_test)
{
    emscripten::function("async_func", &async_func);
    emscripten::function("sync_func", &sync_func);
}

int main()
{
    return 0;
}

JS:

<html>
    <body>
        <script src="./out/build/em-x64-debug/async_test.js"></script>
        <script>
            async function async_cb(){
                // These lines work individually, but break when used simultaneously.
                await fetch('./test.txt')
                Module.sync_func()
            }

            Module['onRuntimeInitialized'] = () => {
                Module.async_func(async_cb)
            }
        </script>
    </body>
</html>

Does anyone know how this can be solved and how you can still call C++ functions after the asynchronous fetch? Thank you!