# How to load a local js file into Observable?

**URL:** <https://talk.observablehq.com/t/how-to-load-a-local-js-file-into-observable/3219>\
**Category:** Uncategorized\
**Created:** [May 5, 2020, 4:43pm UTC](https://talk.observablehq.com/t/how-to-load-a-local-js-file-into-observable/3219 "2020-05-05T16:43:02Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![jeremy9959](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jeremy9959/32/3059_2.png) [@jeremy9959](https://talk.observablehq.com/u/jeremy9959)\
**Post date:** [May 5, 2020, 4:43pm UTC](https://talk.observablehq.com/t/how-to-load-a-local-js-file-into-observable/3219/1 "2020-05-05T16:43:02Z")

</div>

I have local JavaScript code that I’d like to import into observable. I’ve tried

```auto
Require(“./file.js”)

```

But I always get Me: unable to load module.

I can import the module into a node session without a problem.

---

<div class="post-metadata">

**Author:** ![jparklev](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jparklev/32/3055_2.png) [@jparklev](https://talk.observablehq.com/u/jparklev)\
**Post date:** [May 5, 2020, 4:58pm UTC](https://talk.observablehq.com/t/how-to-load-a-local-js-file-into-observable/3219/2 "2020-05-05T16:58:33Z")

</div>

Would [attaching the file to your notebook](https://observablehq.com/@observablehq/file-attachments) work for your use case?

---

<div class="post-metadata">

**Author:** ![jeremy9959](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jeremy9959/32/3059_2.png) [@jeremy9959](https://talk.observablehq.com/u/jeremy9959)\
**Post date:** [May 5, 2020, 5:18pm UTC](https://talk.observablehq.com/t/how-to-load-a-local-js-file-into-observable/3219/3 "2020-05-05T17:18:16Z")

</div>

I’d like to actually execute the code in the file, rather than read it as data.  
I’m working through a JavaScript book and there is code used to setup some of the exercises that I’d like to run. Mostly the code defines some variables and so on.

I could just cut-and-paste it into cells but that’s a pain.

I’d use %import in the Jupiter/python context.

---

<div class="post-metadata">

**Author:** ![GordonSmith](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/gordonsmith/32/6902_2.png) [@GordonSmith](https://talk.observablehq.com/u/GordonSmith)\
**Post date:** [May 5, 2020, 5:36pm UTC](https://talk.observablehq.com/t/how-to-load-a-local-js-file-into-observable/3219/4 "2020-05-05T17:36:48Z")

</div>

> **[load a library from a file attachment](https://observablehq.com/@circles/load-a-library-from-a-file-attachment)**
>
> An Observable notebook by Simon Hefti.

You may not need to do the Rollup step - depending on what dependencies your library has.

(Rollup will bundle all dependencies into a single file)

---

<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 5, 2020, 6:27pm UTC](https://talk.observablehq.com/t/how-to-load-a-local-js-file-into-observable/3219/5 "2020-05-05T18:27:17Z")

</div>

If you want to require a file attachment, it’s:

```auto
foo = require(await FileAttachment("foo.js").url())

```

This assumes that your file (foo.js) is compatible with AMD ([d3-require](https://github.com/d3/d3-require)). If you want to load a standard ES module instead, you can use dynamic import:

```auto
foo = import(await FileAttachment("foo.js").url())

```

---

<div class="post-metadata">

**Author:** ![jeremy9959](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jeremy9959/32/3059_2.png) [@jeremy9959](https://talk.observablehq.com/u/jeremy9959)\
**Post date:** [May 5, 2020, 8:20pm UTC](https://talk.observablehq.com/t/how-to-load-a-local-js-file-into-observable/3219/6 "2020-05-05T20:20:40Z")

</div>

Thanks! One more question if you’ll indulge me. Suppose my script file just exports one default value:

```auto
export default default_value

```

In observable I follow your suggestion by attaching the file and then doing

```auto
m = import(await FileAttachment("script.js").url())

```

in one cell and then

```auto
variable = m.default

```

in the next and all is well, I can go ahead and use `variable` in other cells.

Why can’t I do:

```auto
m = (import(await FileAttachment('script.js').url())).default

```

When I try this, I get `m` as `undefined `.

[Here’s an example](https://observablehq.com/@jeremy9959/demo-of-loading-script-from-attachment)

---

<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 5, 2020, 8:45pm UTC](https://talk.observablehq.com/t/how-to-load-a-local-js-file-into-observable/3219/7 "2020-05-05T20:45:59Z")

</div>

You need one more await because dynamic import returns a promise.

```auto
t = (await import(await FileAttachment("scripts.js").url())).SCRIPTS

```