# How to load local library **URL:** \ **Category:** Help\ **Created:** [December 3, 2019, 4:51pm UTC](https://talk.observablehq.com/t/how-to-load-local-library/2607 "2019-12-03T16:51:06Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![alfa07](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/alfa07/32/800_2.png) [@alfa07](https://talk.observablehq.com/u/alfa07)\ **Post date:** [December 3, 2019, 4:51pm UTC](https://talk.observablehq.com/t/how-to-load-local-library/2607/1 "2019-12-03T16:51:06Z")
```auto maze = require('http://127.0.0.1:31338/maze.js') ``` gives error: ```auto maze = vt: invalid module ``` The module is build with Typescript using config: ```auto { "compilerOptions": { "target": "ES2017", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */ "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ "outDir": "./dist", /* Redirect output structure to the directory. */ "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ "strict": true, /* Enable all strict type-checking options. */ } } ``` Loading it with: ```auto text = (await fetch("http://127.0.0.1:31338/maze.js")).text() mod_maze = { var exports = {}; eval(text.toString()); return exports; } ``` works. I’ve also tried AMD, UMD combinations with ES5, ES2015, etc. with the same result. ---
**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:** [December 3, 2019, 7:27pm UTC](https://talk.observablehq.com/t/how-to-load-local-library/2607/2 "2019-12-03T19:27:32Z")
Hi @alfa07. Observable’s [require](https://github.com/d3/d3-require) uses AMD, so you’ll need to generate an AMD-compatible bundle rather than targeting CommonJS. (UMD is recommended.) If your AMD bundle doesn’t work with require, I’d be happy to take a look, but you’d need to share the generated code, say by attaching the bundle as a file attachment to a notebook and then sharing that notebook. If you don’t want to share this code publicly you are welcome to email us at support. Also, I think some browsers won’t let you access HTTP servers from Observable (which uses HTTPS exclusively). Though it appears your browser allows it for localhost. You can avoid this, again, by attaching the generated bundle to your notebook as a file, e.g.: ```auto maze = require(await FileAttachment("maze.js").url()) ``` ---
**Author:** ![alfa07](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/alfa07/32/800_2.png) [@alfa07](https://talk.observablehq.com/u/alfa07)\ **Post date:** [December 4, 2019, 4:47am UTC](https://talk.observablehq.com/t/how-to-load-local-library/2607/3 "2019-12-04T04:47:47Z")
@mbostock thank you for the reply! Here is a repro as you’ve recommended: [Require Test](https://observablehq.com/@alfa07/require-test) My goal is to develop a library in a TypeScript and use it in an Observable notebook. I thought that requiring it from a local server should work, but it turned out not to be so simple. ---
**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:** [December 4, 2019, 6:01am UTC](https://talk.observablehq.com/t/how-to-load-local-library/2607/4 "2019-12-04T06:01:55Z")
The reason this AMD bundle isn’t working is because it’s generating multiple [named AMD modules](https://requirejs.org/docs/whyamd.html#namedmodules), whereas what you want is to generate a [single unnamed module](https://requirejs.org/docs/whyamd.html#definition). Unfortunately, I’m not familiar with the TypeScript compiler, so I don’t know what options would be needed to generate an anonymous AMD module (which is the more common format). You could maybe also try using the ES2015 output format, and then using a dynamic import instead of require. ```auto maze = import(await FileAttachment("maze_es.js").url()) ``` ---
**Author:** ![carl](https://avatars.discourse-cdn.com/v4/letter/c/ee7513/32.png) [@carl](https://talk.observablehq.com/u/carl)\ **Post date:** [December 11, 2019, 3:00am UTC](https://talk.observablehq.com/t/how-to-load-local-library/2607/5 "2019-12-11T03:00:55Z")
Hi. I know this is somewhat of an old question, but what worked for me was setting > “compilerOptions”: { > “target”: “ES6”, > “module”: “ES6”, and then using module = import(“url”) in the notebook. minor issues - needing to reload page rather than rerun cell to reload module - couldn’t get import {something} from “url” format to work. (or import “url” returning the default export) Would be be possible to load the map file also? Perhaps they can be packaged together? At least for me, the idea of having typescript in an external editor (for “heavier” code) and then the notebook to work with it seems a great combo. ---
**Author:** ![alfa07](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/alfa07/32/800_2.png) [@alfa07](https://talk.observablehq.com/u/alfa07)\ **Post date:** [December 12, 2019, 5:12pm UTC](https://talk.observablehq.com/t/how-to-load-local-library/2607/6 "2019-12-12T17:12:15Z")
Thank you @carl, yes, the import is not working and it is a deal breaker. After spending too much time on it I just gave up. Observable is awesome for snippets but when your project grows (and now I have a second project in thousands of lines) the lack of a proper editor and types shows. ---
**Author:** ![alfa07](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/alfa07/32/800_2.png) [@alfa07](https://talk.observablehq.com/u/alfa07)\ **Post date:** [December 18, 2019, 7:07am UTC](https://talk.observablehq.com/t/how-to-load-local-library/2607/7 "2019-12-18T07:07:16Z")
Ok, I’ve managed make it work. The key is to use ES6 modules as @carl suggested and to use rollup to package into a single file. Here is the [example](https://observablehq.com/@alfa07/using-typescript-with-observable) together with server [part](https://github.com/alfa07/observable-ts-example/tree/master).