TypeError: Super expression must either be null or a function

[aman-jeeves]

We are using this guide (https://developers.belvo.com/docs/fiscal-overview-of-a-business) to show graphical representation to the end user. For this we using this library i.e. plot-react everything thing works fine as expected until we create production build (https://www.linkpicture.com/q/Prod-Error.png).

The error only comes when we create production build and the page doesn't loads anymore ,while it works perfectly fine on local.

Can someone help fixing this issue ?

[iddan]

Can you provide a codesandbox that reproduces your issue?

[jacobkjaersgaardhansen]

Hi, I had the same issue: plot-react worked perfectly fine when doing npm start, but failed with npm run build. I use create-react-app. I don't know why this happens, but maybe it has something do to with some circular dependency between @observable/plot and plot-react during some build optimization.

For me it worked to rewrite my component to follow idea of @iddan's well-written plot-react/src/PlotFigure.tsx but without using the plot-react library otherwise:

import { useEffect, useRef } from 'react'
import * as Plot from "@observablehq/plot";

function myPlotComponent({ data }) {
  const ref = useRef(null);

  useEffect(() => {
    const plot = Plot.plot({
      y: {
        grid: true
      },
      marks: [
        Plot.rectY(
          data,
          Plot.binX(
            { y: "sum" },
            {
              x: {
                thresholds: 20,
                value: "date"
              },
              y: "count",
              fill: "steelblue"
            }
          )
        ),
        Plot.ruleY([0])
      ],
      width: 350
    });
    if (ref.current) {
      if (ref.current.children[0]) {
        ref.current.children[0].remove();
      }
      ref.current.appendChild(plot);
    }
  }, [ref, data]);
  return (<div ref={ref} />)
}

export default myPlotComponent