Help with unpkg for protobufjs

Community Help
1

I’m playing around with an idea and was hoping to get protobufjs working in Observable. Unfortunately I’m a bit of a newbie to javascript. The language isn’t hard to work with but trying to understand the tooling side of things is… an adventure.

I can find protobufjs on unpkg, they claim to be AMD/CommonJS compatible (https://github.com/dcodeIO/ProtoBuf.js/#installation) but I haven’t been able to produce a working require statement that didn’t produce an “Invalid module” error. Can anyone help me figure out if I’m doing something wrong or is protobufjs just unconventional in some way that makes it incompatible at the moment?

-Dan

2

Hey Dan,

Sure, that one’s a little tricky - here’s what works:

protobufjs = require('https://wzrd.in/standalone/protobufjs')

This uses wzrd.in to build a bundle of protobufjs and its one dependency, long.

For the interested, why this module is tricky to require:

Even though there’s a nice AMD package provided by Protobuf.js, that package has an AMD dependency on a package called long, and that package - long - doesn’t have an unpkg entry point. So the Protobuf.js library loads, tries to load long, and the long package provides… a CommonJS entry point, which doesn’t work.

We’re continuing to work through issues like this - whether it’s recommending that libraries add unpkg entry points (which would fix the issue in this case, if long had one), or figuring out how to make require() smarter so it can properly find the entry points of sub-requires.

2 Likes
3

I may have a similar issue with function-plot

neither require('https://wzrd.in/standalone/function-plot') nor "https://unpkg.com/function-plot" seem to work

I’d appreciate other recommendations that plot simple math functions.

EDIT: I just saw Tom’s notebook https://beta.observablehq.com/@tmcw/requiring-modules-troubleshooting , but still can’t make it work. Thanks in advance!

4

Sure, so - as function-plot notes in its readme, it relies on d3 v3, just sort of ‘laying around’ in the window variable. So, you can implement this like so:

functionPlot = {
  window.d3 = await require('d3@3');
  return require('https://wzrd.in/standalone/function-plot');
}

That’ll properly get functionPlot working in your notebook.

1 Like
5

Thank you!

It’s embarrassing: I thought it’d just return the graph like Vega, but I got an Object type response and I don’t know what to do with it. If it’s easier for you to see an example:

6

functionPlot takes an element target as an option - to get it working, you can do

{
  let target = DOM.element('div');
  functionPlot({
    title: 'y = x * x',
    data: [{
      fn: 'x^2'
    }],
    target
  });
  return target;
}
1 Like
7

Thank you SO MUCH!!!