How to load a local js file into Observable?

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


But I always get Me: unable to load module.

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

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

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.

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)

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())

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

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

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