How to use Emscripten compiled JavaScript within React / React Native

Question

I'm currently using Emscripten to compile a basic C function into JavaScript to use within a React Native project. However, when I import Module from inside React code, the Module object is empty. This occurs in both React and React Native projects.

Running index.js in my terminal with node ./index.js returns the expected result.

I'm compiling ping.c and outputting ping.js with this command:

emcc ping.c -o ping.js -s WASM=0 -s EXPORTED_FUNCTIONS='["_pingIt"]'

ping.c:

#include <stdio.h>
#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int pingIt() {
  return 1;
}

index.js:

let Module = require('./ping.js');

module.exports = Module;

I'm exporting Module from index.js and importing it into my React code.

Current behavior

// Running in React
console.log(Module); // returns {}

Expected behavior

// Running in React
console.log(Module._pingIt()); // should return 1

Answer 1

I stumbled across a MODULARIZE setting in the Emscripten docs here. I edited the emcc command:

emcc ping.c -o ping.js -s WASM=0 -s ENVIRONMENT=web -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]' -s MODULARIZE=1

MODULARIZE=1 being the magic bit

Now within the index.js file:

let Module = require('./ping.js'); // Your Emscripten JS output file
let pingIt = Module().cwrap('pingIt'); // Call Module as a function

module.exports = pingIt;

Now in the React component you can import pingIt from '<file-location>'; and call the function like any other pingIt().

Hope someone finds this useful! I couldn't find many examples of using Emscripten alongside React.