Proper way to load WASM module in React for big files (more than 4kb)

So I figured out their were more steps to do to get WASM binary working with React, especially if you want to import it in React es6 modules (not from public folder).

I don't claim this as a general solution, just the one that worked for me (and seems to work in most cases).

COMPILER FLAGS

Here is the em++ build command I now use :

em++ ../main.cpp ../stringFormat.cpp \
      -Os -g1 \
      -s WASM=1 \
      -s MALLOC=emmalloc \
      -s ALLOW_MEMORY_GROWTH=1 \
      -s EXPORT_ES6=1 \
      -s MODULARIZE=1 \
      -s 'EXPORT_NAME="LongerSubSequence"' \
      -s 'ENVIRONMENT="web"' \
      --bind \
      -o lss.mjs \
      -std=c++11 || exit 1

Not sure about all the options, they may be some optimization to do here. The important ones are :

• Bind: Apparently necessary for compiler to override C++ name mangling when naming js modules (by default, C++ compiler will change all variable names kind of like react does with css modules).
• EXPORT_ES6: Will slightly change the generated glue js syntax so it can be imported in es6 way.

• MODULARIZE: Export all functions under a common Module (named with EXPORT_NAME flag) so you can just import js as Module and call Module.My_CPP_Function in your js code.

• g1: Keep generated glue code readable enough to manage next step.

ADDING FILES TO REACT

The process generates two files : lss.mjs and lss.wasm. They go like this in the project tree of React :

My_React_Project
  |_public
  | |_/path/to/lss.wasm
  |
  |_src
    |_/path/to/lss.mjs

/path/to/ can be any path inside the folder, even root.

ADAPT GLUE JS

Finally, to fix errors, I edited the generated lss.mjs file :

1. Add /* eslint-disable */ at top of the file, to avoid React syntax errors.
2. Replace var _scriptDir = import.meta.url; with var _scriptDir = '/path/to/lss.wasm';, relative to public folder. Not sure if it is useful regarding the following steps, but React will just crash with the import.meta syntax.
3. Replace scriptDirectory = self.location.href; with scriptDirectory = window.self.location.href;, since React es6 functions aren't binded to window.
4. Remove the following block:

var dataURIPrefix = "data:application/octet-stream;base64,";

function isDataURI(filename) {
 return String.prototype.startsWith ? filename.startsWith(dataURIPrefix) : filename.indexOf(dataURIPrefix) === 0;
}

It is used by the compiler to automatically locate the binary file, but I handled it by myself instead.

5. replace var wasmBinaryFile = "lss.wasm"; with const wasmBinaryFile = '/path/to/lss.wasm'; ('/' will point to public folder).
6. Remove:

if (!isDataURI(wasmBinaryFile)) {
 wasmBinaryFile = locateFile(wasmBinaryFile);
}

7. Remove:

function getBinary() {
 try {
  if (wasmBinary) {
   return new Uint8Array(wasmBinary);
  }
  if (readBinary) {
   return readBinary(wasmBinaryFile);
  } else {
   throw "both async and sync fetching of the wasm failed";
  }
 } catch (err) {
  abort(err);
 }
}

8. Replace the getBinaryPromise() function with the following one:

const getBinaryPromise = () => new Promise((resolve, reject) => {
 fetch(wasmBinaryFile, { credentials: 'same-origin' })
   .then(
     response => {
      if (!response['ok']) {
       throw "failed to load wasm binary file at '" + wasmBinaryFile + "'";
      }
      return response['arrayBuffer']();
     }
   )
   .then(resolve)
   .catch(reject);
});

9. A few lines below, replace

if (!wasmBinary && typeof WebAssembly.instantiateStreaming === "function" && !isDataURI(wasmBinaryFile) && typeof fetch === "function")

with

if (!wasmBinary && typeof WebAssembly.instantiateStreaming === "function" && typeof fetch === "function")

This just remove the isDataURI condition, since we 'trust' the path we gave to our binary file.

NOW USE YOUR BINARY CODE

And that's all it took for me to manage it. Now, in any of my react files, I can just use my c++ function like this :

anyfile.js

import LongerSubSequenceGlue from 'path/to/lss.mjs';
// Avoid main function running if you just want to use another function
const lssModule = LongerSubSequenceGlue({
    noInitialRun: true,
    noExitRuntime: true
});

//...

lssModule.my_cpp_function(...my_params);

Worked like a charm on Chrome, Firefox and Safari, will make more test later.