Open aman-jeeves opened 3 years ago
Can you provide a codesandbox that reproduces your issue?
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
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 ?