How load an emscripten generated module with es6 import?

Question

I am trying to import a module generated with emscripten as a es6 module. I am trying with the basic example from emscripten doc.

This is the command I am using to generate the js module from the C module:

emcc example.cpp -o example.js -s EXPORTED_FUNCTIONS="['_int_sqrt']" -s EXTRA_EXPORTED_RUNTIME_METHODS="['ccall', 'cwrap']" -s EXPORT_ES6=1 -s MODULARIZE=1

The C module :

#include <math.h>

extern "C" {

  int int_sqrt(int x) {
    return sqrt(x);
  }
}

Then importing the generated js module:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Wasm example</title>
  </head>
  <body>
    <script type="module">
      import Module from './example.js'

      int_sqrt = Module.cwrap('int_sqrt', 'number', ['number']);
      console.log(int_sqrt(64));
    </script>
  </body>
</html>

This is failing because cwrap is not available on the Module object:

Uncaught TypeError: Module.cwrap is not a function

score 14 · Accepted Answer · edited Jan 07 '19 at 13:31

14

As you're using MODULARIZE, you have to make an instance of the Module first.

import Module from './example.js'
const mymod = Module();
const int_sqrt = mymod.cwrap('int_sqrt', 'number', ['number']);
console.log(int_sqrt(64));

You could also try the MODULARIZE_INSTANCE option.

You may need to wait for it to finish initialising - I'm not sure when the function is so simple. That would look like this:

import Module from './example.js'
Module().then(function(mymod) {
  const int_sqrt = mymod.cwrap('int_sqrt', 'number', ['number']);
  console.log(int_sqrt(64));
});

edited Jan 07 '19 at 13:31

Sebastian Richter

477
8
18

answered Nov 20 '18 at 01:21

curiousdannii

1,658
1
25
40

I get this error: Failed to compile. ./src/components/js_plumbing.js. SyntaxError: Unexpected token, expected ( (3:25) . > 3 | var _scriptDir = import.meta.url; – user2315094 Dec 29 '19 at 10:23
@user2315094 Ask a new question. – curiousdannii Dec 29 '19 at 11:40

Ludovic Aubert · Answer 2 · 2023-01-31T12:56:30.570

What worked for me:

emcc compile options:

emcc latuile.cpp bombix.cpp -o latuile-origine.js -s EXPORTED_FUNCTIONS='["_latuile","_bombix"]' -s EXPORTED_RUNTIME_METHODS='["ccall","cwrap"]' -s ALLOW_MEMORY_GROWTH=1  -s EXPORT_ES6=1 -sMODULARIZE -s EXPORT_NAME="createMyModule"

Where latuile and bombix are the names of the C++ functions I want to call.

At the bottom of the produced file latuile-origine.js, I read:

export default createMyModule;

Then in the Javascript module that imports from latuile-origine.js, I have (notice the 'default' keyword):

import {default as createMyModule} from "./latuile-origine.js";
var Module;
function clientFunction()
{
...
    const bombix = Module.cwrap("bombix","string",["string","string","string","string"])
    const jsonResponse = bombix(rectdim, translations, sframe, slinks);
...
}

window.main = function main()
{
    createMyModule().then(function(mymod){
        Module = mymod;
    });
}

How load an emscripten generated module with es6 import?

2 Answers2

Linked