# Handling Dependencies for an es6 Module

**URL:** <https://talk.observablehq.com/t/handling-dependencies-for-an-es6-module/330>\
**Category:** Help\
**Created:** [February 13, 2018, 4:36am UTC](https://talk.observablehq.com/t/handling-dependencies-for-an-es6-module/330 "2018-02-13T04:36:22Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![backspaces](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/backspaces/32/196_2.png) [@backspaces](https://talk.observablehq.com/u/backspaces)\
**Post date:** [February 13, 2018, 4:36am UTC](https://talk.observablehq.com/t/handling-dependencies-for-an-es6-module/330/1 "2018-02-13T04:36:22Z")

</div>

This should be obvious, but I haven’t seen an example yet in the notebooks: How do I handle dependencies in my notebooks?

Simple example: I have a github repo which uses Three. Do I simply require() it, then import() my es6 module after that? The order dependency seems to go against reactivity.

And to make things worse, my repo is “hosted” in a github page as a CDN rather than in npm for unpkg use. I’ll make a npm pkg soon but if there is a way to have the awkward Three unpkg require() resolved as a dependency for my CDN es6 module?

I _think_ the answer is like  
[https://beta.observablehq.com/@tmcw/requiring-modules-troubleshooting](https://beta.observablehq.com/@tmcw/requiring-modules-troubleshooting)  
shows with Three and OrbitControl: do everything in a block that returns my module after it’s gotten Three and Orbit playing nice together.

Any example of importing modules with dependencies _much_ appreciated.

---

<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:** [February 13, 2018, 9:50pm UTC](https://talk.observablehq.com/t/handling-dependencies-for-an-es6-module/330/2 "2018-02-13T21:50:59Z")

</div>

Cells in Observable are evaluated in topological order, not top-down order, so if you require Three.js, any cell that references it (`THREE`) will automatically wait until it has been loaded. Here’s a quick hello-world:

[https://beta.observablehq.com/@mbostock/hello-three-js](https://beta.observablehq.com/@mbostock/hello-three-js)

If a library is defined as an AMD or an ES module, then _library_ dependencies are loaded automatically. For example, if you require d3-scale:

```auto
d3 = require("d3-scale")

```

This will also cause d3-array, d3-collection, d3-format, d3-interpolate, d3-time and d3-time-format to be loaded. If you are a library author, I recommend using [Rollup](https://rollupjs.org) to bundle your library. It lets you declare your dependencies in the package.json and supports AMD, UMD, IIFE and ES module bundle formats.

While Three is defined in the UMD format, Three OrbitControls are not, so you have to jump through another hoop to load them. The OrbitControls module is CommonJS: it depends on a global module.exports, which it assigns to a function. You need to call this function in order to create the OrbitControls object. Here’s what I recommend:

```auto
THREE = {
  const THREE = await require("three@0.82.1/build/three.min.js");
  if (!THREE.OrbitControls) { // If not previously loaded.
    const module = window.module = {exports: undefined};
    THREE.OrbitControls = await require("three-orbit-controls@82.1.0/index.js").catch(() => module.exports(THREE));
  }
  return THREE;
}

```

This code is extra tricky because `require` is cached internally, so we have to be careful to not try to load OrbitControls more than once. Here’s a working demonstration:

[https://beta.observablehq.com/@mbostock/hello-three-js-orbit-controls](https://beta.observablehq.com/@mbostock/hello-three-js-orbit-controls)