[SSR] Cannot read properties of undefined (reading 'Event')

[Jannchie]

During SSR rendering, an error occurs: Cannot read properties of undefined (reading 'Event'). The specific location of the error is in: plot.js:183:59. https://github.com/observablehq/plot/blame/90a56897cabda400e2b7537f8ecbbd2cebd18f7f/src/plot.js#L183

The reason might be that in the SSR environment, a virtual implementation of the Document element is needed. However, the example provided (which I referenced from this Observable example) is somewhat outdated.

I added the following line of code in the constructor of Document, to work around this issue:

class Document {
  constructor() {
    this.documentElement = new Element(this, 'html');
    this.defaultView = { Event }; // workaround
  }
  // other things
}

Perhaps the example file needs to be updated?

[Jannchie]

I just found the PlotRender in official vitepress doc is working fine and applied the above workaround..

[marr]

@mbostock I forked the codesandbox and applied the fix here: https://codesandbox.io/p/devbox/plot-vue-forked-ppj4hr?workspaceId=ws_VNLSZ7nJAmndC1QDz2TLHo

I think it would save people some headaches when trying to use plot with vue/nuxt/ssr. Is there an existing repo I can make a PR to for that change?

[mbostock]

The real issue here is #2160; the plot shouldn’t be dispatching an event during server-side render.

[mbostock]

I’ve updated the CodeSandbox examples. I couldn’t get them to reproduce the bug, but hopefully the fix is correct.

[marr]

Thanks Mike. I was debugging the dispatchValue code when run in a server context. I didn't see any hint of it being run outside of a typical DOM context. I supposed there could be some conditional around the dispatchEvent there:

  // Allows e.g. the pointer transform to support viewof.
  context.dispatchValue = (value) => {
    if (figure.value === value) return;
    figure.value = value;
    figure.dispatchEvent(new context.document.defaultView.Event("input", {bubbles: true}));
  };

My naive approach would be to set a flag in context which hints its being run in a server context.