How to load a local js file into Observable?

1

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

Require(“./file.js”)

But I always get Me: unable to load module.

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

2

Would attaching the file to your notebook work for your use case?

3

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.

4

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)

5

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

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

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

foo = import(await FileAttachment("foo.js").url())
6

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

export default default_value

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

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

in one cell and then

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:

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

When I try this, I get m as undefined .

Here’s an example

7

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

t = (await import(await FileAttachment("scripts.js").url())).SCRIPTS
3 Likes