synchronizer
synchronizer

Reputation: 2075

Emscripten Wasm Can't use most of C++ when compiling standalone

I am attempting to compile a small C++ example that uses the standard library into wasm for use with a basic javascript entrypoint (not generated glue code). Unfortunately, when loading the module, I receive the following error:

TypeError: WebAssembly.instantiate(): Import #0 module="wasi_snapshot_preview1" error: module is not an object or function

I have attempted building using wasisdk and standalone llvm previously, but had similar issues. There doesn't seem to be information about working around this rather cryptic error.

Firstly, before I go deeper, is it even possible to build C++ code that uses data structures from the standard library into standalone wasm? I am unsure of whether I should be able to get this working given that wasm is still in its early days, but I might be doing something incorrectly. In my experience, almost every built-in data structure and string causes issues, even if I overload new and delete to rule-out some memory allocation issues.

For more details, my system is MacOS 10.14, and I'm running Chrome 80. I am using the latest version of emsdk from the github to compile.

My apologies for the influx of code blocks, but I am unsure of a better example. I've reduced the examples to the minimum as well as I could.

This is my bash build script:

em++ source.cpp \
--std=c++17 \
-flto \
-fno-exceptions \
-Os \
-o output.wasm \
-s "EXPORTED_FUNCTIONS=['_animate']" \
-s ERROR_ON_UNDEFINED_SYMBOLS=0 \

C++: I get the error as soon as I use a data structure such as a standard unordered map.

#ifdef __cplusplus
    #define extern_c_begin() extern "C" {
    #define extern_c_end() }
#else 
    #define extern_c_begin()
    #define extern_c_end()
#endif

#include <unordered_map>

std::unordered_map<int, int> map;

int use_map() {
        // if I use the map at all, I get the error
    map.insert({1, 2});
    return (int)map.size();
}

extern_c_begin()

// call into js
void hello_js(void);

int animate(long arg) {
    int size = use_map();
    hello_js();
    return size;
}

extern_c_end()

Finally, my javascript/index.html:

<!DOCTYPE html><html><head></head><body>
    <script type="module">
        "use strict";
        (async () => {
          try {
            const wasmInfo = {
                instance   : null,
                memoryHeap : null,
                env        : {}
            };

            wasmInfo.env["hello_js"] = () => {
                console.log("in js, call from wasm");
            };

            // error on load
            const wasmLoadResult = await WebAssembly.instantiateStreaming(
              fetch("./output.wasm"),
              {env : wasmInfo.env}
            );
            wasmInfo.instance = wasmLoadResult.instance;

            function animate(t) {
                requestAnimationFrame(animate);
                try {
                    console.log(wasmInfo.instance.exports.animate(t));
                } catch (e) {
                    console.error(e);
                }
            }
            requestAnimationFrame(animate);

          } catch (err) {
            console.error(err);
          }
        })();
</script></body></html>

This seems to happen with practically every data structure. I even tried a third-party library called robin_hood to replace the map, but that has the same issue.

Is there a solution?

Upvotes: 2

Views: 3996

Answers (2)

GirkovArpa
GirkovArpa

Reputation: 4912

Firstly, before I go deeper, is it even possible to build C++ code that uses data structures from the standard library into standalone wasm?

Yes. Proof:

// app.cpp

#include <vector>
using std::vector;
typedef long int i32;
extern "C" {
  i32 myFunction(i32 myNumber) {
    vector<i32> myVector{ 666, 1337 }; 
    return myVector[0] + myVector[1] + myNumber;
  }
}
emcc -Os -s INITIAL_MEMORY=64kb -s MAXIMUM_MEMORY=64kb -s ALLOW_MEMORY_GROWTH=0 -s TOTAL_STACK=0kb -s STANDALONE_WASM -s EXPORTED_FUNCTIONS="['_myFunction']" -Wl,--no-entry "app.cpp" -o "app.wasm"
// javascript 

(async () => {
  const response = await fetch('app.wasm');
  const file = await response.arrayBuffer();
  const imports = { wasi_snapshot_preview1: { proc_exit: () => { } } } // dummy placeholder function, a sacrifice to the emscripten god who demands it
  const wasm = await WebAssembly.instantiate(file, imports);
  const { myFunction } = wasm.instance.exports;
  const myNumber = myFunction(123);
  console.log(myNumber); // 2126
})();

Upvotes: -1

sbc100
sbc100

Reputation: 3022

You need to implement all the system calls required by your program. Take a look at the output of wasm-objdump to see a list of all the imports required by your program.

Upvotes: 1

Related Questions