plot
plot copied to clipboard
observablehq
Plot.auto - TypeError: Failed to execute 'dispatchEvent' on 'EventTarget': parameter 1 is not of type 'Event'
I'm trying to use Plot.auto() in a Server Side Rendering (SSR) environment, so using JSDOM to provide a DOM document. When plot() is called, I get a TypeError.
I can't find much information on this, but I believe it might be to do with different instances of window being used. If I specify the mark type, e.g. Plot.rectY it works fine, so think that this might be down to the mark type that auto is choosing based on the data, so no doubt I'll find other instances of marks that fail in this way.
const { document } = new JSDOM('<!DOCTYPE html>').window;
const plot = Plot.auto(penguins, {x: "island"}).plot({document})
Right… currently we need to patch Event like so:
global.Event = jsdom.window.Event;
But in that case you might want to patch document too:
import { JSDOM } from "jsdom";
import * as Plot from "@observablehq/plot";
import * as d3 from "d3";
const penguins = await d3.csv(
"https://raw.githubusercontent.com/mwaskom/seaborn-data/master/penguins.csv",
d3.autoType
);
const jsdom = new JSDOM("<!DOCTYPE html>");
global.document = jsdom.window.document;
global.Event = jsdom.window.Event;
const plot = Plot.auto(penguins, { x: "island" }).plot();
plot.setAttribute("xmlns", "http://www.w3.org/2000/svg");
console.log(plot.outerHTML);
(note; I'm using "type":"module" in my package.json)
I don't think we plan to actually use the event in JSDOM, so maybe the happy fix here is to wrap the dispatchEvent call in a try…catch.
