How to make the code dowloaded workin in a local application without network

Community Help
1

Hello, I have a runtimeError for all my charts downloaded that I must use in a local application without any network. I make attention to load all the js needed in my local folder, so ? Is someone can help me please ? (it works very well with the network on)

chart = RuntimeError: NetworkError when attempting to fetch resource.
ViewOutput = RuntimeError: NetworkError when attempting to fetch resource.
viewof innerRadius = RuntimeError: NetworkError when attempting to fetch resource.

2

Please see our Standalone example:

1 Like
3

Thank you VERY MUCH Mike :hugs: :hugs: :hugs:, I forgot to tell the Observable runtime which files I wanted to use in the local directory !

// Initialize the Observable Runtime, telling it to use our local copy of D3
// rather than loading one from a CDN.
const runtime = new Runtime(new Library(name => {
switch (name) {
case “d3@6”: return “d3.v6.min”;
case “d3-require”: return “d3-require.min”;
case “d3-array”: return “d3-array.min”;
case “d3-collection”: return “d3-collection.min”;
case “d3-path”: return “d3-path.min”;
case “d3-shape”: return “d3-shape.min”;
case “d3-sankey”: return “d3-sankey.min”;
}
}));

The runtimeError is almost fix, but I have now a new runtimeError :

viewof edgeColor = RuntimeError: Inputs is undefined
viewof align = RuntimeError: Inputs is undefined
viewof showTotal = RuntimeError: Inputs is undefined
chart = RuntimeError: Inputs is undefined

It seems there is no package for observablehq/Inputs
I tried to create a folder named Inputs in my js directory but it doesn’t work. Is there another issue better than put all the Inputs functions into the notebook before download ?

4

I come back because I still cannot get the Observable library to work without a network, I have tried several ways but none work and I cannot find my error (I am a beginner). The Bar char example in standalone works perfectly, and to add the functions of the inputs package I simply tell it to use my local copy of inputs:

<script src="../static/js/d3.js"></script>
<script src="../static/dist/js/inputs.js"></script>

   const runtime = new Runtime(new Library(name => {

		  switch (name) {
			                   case "d3": return d3;
			                   case "Inputs": return inputs;
		                          }
		                             }));

But it throws an error, it can’t find the package:

               viewof search = RuntimeError: Inputs is undefined

I added an explicit alias, like this

import * as inputs from “…/static/dist/js/inputs.min.js”;

 const runtime = new Runtime(new Library(name => {
  switch (name) {
                           case "d3": return d3;
	                  case "Inputs": return inputs;
                       }
                         }));

but it still no works,

so i added a require in the notebook, maybe it needs it to associate the alias with the package

Inputs = require("@observablehq/inputs")

but it doesn’t work anymore …
Any examples or suggestions would be very welcome because I don’t know what to do now :slight_smile:

5

I have tried to change the path of the Observable inputs package in the define function, but it doesn’t work :pleading_face::

  main.variable(observer("Inputs")).define("Inputs", ["require"], function(require){return(
require("dist/inputs.js")
)});

:thinking:

6

Are these intentionally in different directories? Or is the extra “dist” a mistake for inputs.js?

Can you share your code so we can help debug? Otherwise it’s hard to say what’s going wrong here. Replacing Inputs should be the same as replacing d3.

7

Ah, I think I see the problem here. Since you’re using the UMD bundle of Observable Inputs, the global it defines will be called observablehq, not inputs. That comes from here:

Sorry for the confusion. This isn’t a very well-trodden path. More commonly people use bundlers (e.g., webpack) which consume the ES module source and don’t have to deal with these archaic formats.

I’ve opened a PR to change the name to Inputs, which makes it the same in vanilla JS as it is on Observable.

2 Likes
8

For this to work you’d need to use a relative path: require("./dist/inputs.js")

9

Thank you so much. Yes I use the “bundle” method on a local machine without a network, it is not complicated at all, very convenient even, except for using the Observable libraries.

I first changed require ("@ observablehq / inputs") to require ("./ dist / inputs.js"), then I tried require ("dist / inputs.js") because in the runtime there is He = ze ("@ observablehq / inputs", "0.9.7", "dist / inputs.min.js") somewhere :sweat_smile:… but now I’m going back to the relative path.

So, what I understand is that the config update you made is going to end up in the runtime?