# Importing Emscripten module

**URL:** <https://talk.observablehq.com/t/importing-emscripten-module/722>\
**Category:** Help\
**Created:** [May 6, 2018, 8:17pm UTC](https://talk.observablehq.com/t/importing-emscripten-module/722 "2018-05-06T20:17:16Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![sdwfrost](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/sdwfrost/32/139_2.png) [@sdwfrost](https://talk.observablehq.com/u/sdwfrost)\
**Post date:** [May 6, 2018, 8:17pm UTC](https://talk.observablehq.com/t/importing-emscripten-module/722/1 "2018-05-06T20:17:16Z")

</div>

Hi All,

I’m trying to wrap a module that I generated using Emscripten. Originally, I compiled with default options and could import using the following:

```auto
libtn93 = new Promise(resolve => {
 require("https:/cdn.rawgit.com/sdwfrost/libtn93/master/emscripten/libtn93.js").catch(()=>resolve(window.Module));
})

```

However, this strategy didn’t allow me to load multiple modules, so I now compile with `-s EXPORT_NAME="'libtn93'" -s MODULARIZE=1`, which results in all of the generated JavaScript in a function.

> <https://github.com/sdwfrost/libtn93/blob/master/emscripten/libtn93.js>

In Node, I can just do this:

```auto
libtn93 = require("./libtn93.js")();

```

I also have a WASM file that requires slightly different treatment as the WebAssembly is loaded asynchronously:

```auto
libtn93 = require("./libtn93wasm.js")().then(function(Module){
    
});

```

I’ve tried everything I can think of to get either of these imported into Observable, but so far, I’ve had no luck. Any tips?

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [May 6, 2018, 8:25pm UTC](https://talk.observablehq.com/t/importing-emscripten-module/722/2 "2018-05-06T20:25:14Z")

</div>

It appears to “just work”:

```auto
libtn93 = require("https://cdn.rawgit.com/sdwfrost/libtn93/master/emscripten/libtn93.js")

```

> **[Require an Emscripten Module](https://observablehq.com/d/959b1f51723d1d16)**
>
> An Observable notebook by Mike Bostock.

However, calling the `libtn93` function appears to hang the browser. (And also, the way the script is defined, it also leaks a `libtn93` global because the script isn’t wrapped in an [immediately-invoked function expression](https://en.wikipedia.org/wiki/Immediately-invoked_function_expression).)

By the way, you can shorten your original code as follows:

```auto
libtn93 = require("https:/cdn.rawgit.com/sdwfrost/libtn93/master/emscripten/libtn93.js").catch(() => window.Module)

```

---

<div class="post-metadata">

**Author:** ![sdwfrost](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/sdwfrost/32/139_2.png) [@sdwfrost](https://talk.observablehq.com/u/sdwfrost)\
**Post date:** [May 7, 2018, 6:41am UTC](https://talk.observablehq.com/t/importing-emscripten-module/722/3 "2018-05-07T06:41:44Z")

</div>

Sorry for not being clear; my original code does ‘just work’; however, this defines a global ‘Module’ object that prevents me from having multiple Emscripten modules. The new modularised version doesn’t work, however, and though I’m sure I’m making a silly mistake, the following gives `Error: unable to load module`

```auto
libtn93 = require("https:/rawgit.com/sdwfrost/libtn93/master/emscripten/libtn93.js")

```

and this gives `undefined`:

```auto
libtn93 = require("https:/rawgit.com/sdwfrost/libtn93/master/emscripten/libtn93.js").catch(()=>{window.libtn93})

```

This has happened before when I didn’t export the correct name, but this looks fine in the JS…

```auto
var libtn93 = function(libtn93) {
  libtn93 = libtn93 || {};
...
  return libtn93;
};
if (typeof exports === 'object' && typeof module === 'object')
  module.exports = libtn93;
else if (typeof define === 'function' && define['amd'])
  define([], function() { return libtn93; });
else if (typeof exports === 'object')
  exports["libtn93"] = libtn93;

```

---

<div class="post-metadata">

**Author:** ![bfcosta](https://avatars.discourse-cdn.com/v4/letter/b/da6949/32.png) [@bfcosta](https://talk.observablehq.com/u/bfcosta)\
**Post date:** [October 19, 2018, 3:25pm UTC](https://talk.observablehq.com/t/importing-emscripten-module/722/4 "2018-10-19T15:25:00Z")

</div>

I am sort of having similar problems with importing an emscripten-compiled module into an observable notebook. I paraphrased your code in the [following test notebook](https://beta.observablehq.com/@bfcosta/webassembly-emscripten) but for some reason, the module only becomes available if I wait a few milliseconds (see cell `m`). Indeed, this is a bit tricky because once the module is loaded, everything works, but if I comment out the line

`await Promises.delay(100);`

and then reload the notebook, the last cell fails with error “TypeError: Cannot read property ‘apply’ of undefined”.

Incidentally, have you found out a solution for your problem?

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [October 19, 2018, 3:44pm UTC](https://talk.observablehq.com/t/importing-emscripten-module/722/5 "2018-10-19T15:44:04Z")

</div>

You need to wait for the runtime to be ready. Details here:

> **[Waiting for Emscripten](https://beta.observablehq.com/@mbostock/waiting-for-emscripten)**
>
> An Observable notebook by Mike Bostock.

---

<div class="post-metadata">

**Author:** ![bfcosta](https://avatars.discourse-cdn.com/v4/letter/b/da6949/32.png) [@bfcosta](https://talk.observablehq.com/u/bfcosta)\
**Post date:** [October 19, 2018, 5:22pm UTC](https://talk.observablehq.com/t/importing-emscripten-module/722/6 "2018-10-19T17:22:22Z")

</div>

It works! But I am feeling extremely dense today, as I cannot see how to follow your hint about setting MODULARIZE=1. I followed the FAQ instructions and recompiled my module with  
`-s MODULARIZE=1 -s 'EXPORT_NAME="MyCode"'`

The compiled module is available at [[https://www.lcg.ufrj.br/~bfcosta/test4.js](https://www.lcg.ufrj.br/~bfcosta/test4.js)]. How should I require it then?

My tentative notebook is at [https://beta.observablehq.com/@bfcosta/webassembly-emscripten-with-modularize](https://beta.observablehq.com/@bfcosta/webassembly-emscripten-with-modularize)

Thanks!