# Using "import" with esm module exporting a default class fails

**URL:** <https://talk.observablehq.com/t/using-import-with-esm-module-exporting-a-default-class-fails/889>\
**Category:** Uncategorized\
**Created:** [June 16, 2018, 11:51pm UTC](https://talk.observablehq.com/t/using-import-with-esm-module-exporting-a-default-class-fails/889 "2018-06-16T23:51:56Z")\
**Posts on this page:** 4\
**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:** [June 16, 2018, 11:51pm UTC](https://talk.observablehq.com/t/using-import-with-esm-module-exporting-a-default-class-fails/889/1 "2018-06-16T23:51:56Z")

</div>

Using unpkg or github pages for an import of an individual class file within the repo/package fails.

See:

> **[AgentScript: test es6 module import() and umd require()](https://observablehq.com/@backspaces/agentscript-test-es6-module-import-and-umd-require)**
>
> An Observable notebook by Owen Densmore.

Example:  
HelloModel = import(“[https://unpkg.com/@redfish/agentscript@0.4.2/docs/models/HelloModel.js](https://unpkg.com/@redfish/agentscript@0.4.2/docs/models/HelloModel.js)”)  
…creates  
▸Module {default: class HelloModel, Symbol(Symbol.toStringTag): “Module”}

Using this via: hello = new HelloModel() results in:  
TypeError: HelloModel is not a constructor

Ditto using github pages … both in the notebook above.

What am I doing wrong? I’ve used exactly these imports within vanilla pages with no problems.  
Example: [http://backspaces.net/temp/d3/?hello](http://backspaces.net/temp/d3/?hello)

Possibly dynamic import(path) doesn’t work with default exports?

---

<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:** [June 17, 2018, 12:13am UTC](https://talk.observablehq.com/t/using-import-with-esm-module-exporting-a-default-class-fails/889/2 "2018-06-17T00:13:35Z")

</div>

Fixed: I needed to use the default value in the returned module:

> hello = new HelloModel.default()

---

<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:** [June 17, 2018, 12:37am UTC](https://talk.observablehq.com/t/using-import-with-esm-module-exporting-a-default-class-fails/889/3 "2018-06-17T00:37:36Z")

</div>

Right; `import(…)` returns a Promise to a Module, not a Promise to its default export. If you only want the default export, you can say:

```auto
HelloModel = (await import("@redfish/agentscript@0.4.2/docs/models/HelloModel.js")).default

```

---

<div class="post-metadata">

**Author:** ![roblabs](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/roblabs/32/871_2.png) [@roblabs](https://talk.observablehq.com/u/roblabs)\
**Post date:** [December 20, 2019, 2:04am UTC](https://talk.observablehq.com/t/using-import-with-esm-module-exporting-a-default-class-fails/889/4 "2019-12-20T02:04:26Z")

</div>

This post was very helpful in finding out how to hook into a Geodesy library. This particular library requires use of `esm` in order to get it to work on command line node —

- [https://github.com/chrisveness/geodesy](https://github.com/chrisveness/geodesy)

To use the library from the command line:

`import Utm, { LatLon, Dms } from 'geodesy/utm.js';`  
`console.log(new LatLon( 33, -116)) # note the LatLon class is already in the namespace`

But it was unclear on how to use in Observable. Based on this discussion, I could bring in all modules into the object `geodesy`, and then access that way.

* * *

##### Hook into a library that doesn’t have an `index.js`

`geodesy = (await import("https://unpkg.com/geodesy@2.2.0/utm.js"))`

`// Be sure access the classes you want from the geodesy object`

`// "48.8583° N, 002.2945° E"`  
`new geodesy.LatLon( 48.8583, 2.2945).toString()`

`// "48° 51′ 30″ N, 002° 17′ 40″ E"`  
`new geodesy.LatLon( 48.8583, 2.2945).toString('dms')`

* * *

See this in action: [https://observablehq.com/@roblabs/map-grids-scales-in-svg#geodesy](https://observablehq.com/@roblabs/map-grids-scales-in-svg#geodesy)

Thanks for the discussion @ mike & @backspaces

 ![await-import-esm](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/9/95e8126a4293a97c43f36287f42742abf1259f53.png)