# Load/Require/Import from Github Pages

**URL:** <https://talk.observablehq.com/t/load-require-import-from-github-pages/296>\
**Category:** Help\
**Created:** [February 11, 2018, 9:03pm UTC](https://talk.observablehq.com/t/load-require-import-from-github-pages/296 "2018-02-11T21:03:23Z")\
**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 11, 2018, 9:03pm UTC](https://talk.observablehq.com/t/load-require-import-from-github-pages/296/1 "2018-02-11T21:03:23Z")

</div>

TL;DR: How do I “require” modules on a CDN or hosting service?

Details:  
My repos are “hosted” on github via the github pages technique.

How do I “require” (import) these? I have two formats for all repos (es6 modules and IIFE’s for script tag use). Also some with a third commonJS format.

I tried using es6 import statements, which I’d prefer, but that failed. Should that work?

Then tried require() of both the IIFE and cjs formats, also w/o luck.

I then found this stunt for loading the IIFEs:

> ascore = require(‘[https://backspaces.github.io/as-core/dist/AS.js](https://backspaces.github.io/as-core/dist/AS.js)’)  
> .catch(() =\> window.AS)

This did work, but seems odd.

So how do I import/require from a web server?

---

<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 11, 2018, 11:30pm UTC](https://talk.observablehq.com/t/load-require-import-from-github-pages/296/2 "2018-02-11T23:30:06Z")

</div>

ES imports work, as long as you `import` a valid ES module. For example:

```auto
d3 = import("https://unpkg.com/d3-color@1.0.3/index.js?module")

```

Or, taking advantage of Observable’s built-in support for loading ES modules from [unpkg](https://unpkg.com):

```auto
d3 = import("d3-color@1")

```

So this works:

```auto
AS = import("https://backspaces.github.io/as-core/dist/AS.module.js")

```

For `require`, you need an [AMD bundle](https://github.com/amdjs/amdjs-api/blob/master/AMD.md) (or more commonly, a [UMD bundle](https://github.com/umdjs/umd)) for it to work out of the box. If you have an IIFE or a CJS bundle, you’ll need to adapt it. The pattern of catching the error and pulling out the global `AS` as you discovered is the standard pattern for loading an IIFE. But, it’s better for library authors to publish UMD bundles or ES modules for broader compatibility. Tom’s written a post on [requiring “stubborn” modules](https://beta.observablehq.com/@tmcw/requiring-modules-troubleshooting).