Closed EarlMilktea closed 7 months ago
Thank you for making this awesome library!
Let me report a bug in the documentation and .d.ts file for TypeScript.
.d.ts
I found a bug in documentation and associated type declaration.
Similar behavior is also reported here.
plotly.js-dist-min
react
react-dom
react-plotly.js
@types/react-plotly.js
I'm using esbuild to bundle and runing it on Brave 120.1.61.114 (Arch Linux).
esbuild
Brave 120.1.61.114
The document and .d.ts says that createPlotlyComponent can be used as follows:
createPlotlyComponent
import Plotly, { type Layout, type PlotData } from "plotly.js-dist-min"; import { createRoot } from "react-dom/client"; import createPlotlyComponent from "react-plotly.js/factory"; // function createPlotlyComponent(plotly: object): React.ComponentType<PlotParams>; const Plot = createPlotlyComponent(Plotly); export function MyElement() { const trace: Partial<PlotData> = { x: [1, 2, 3], y: [1, 2, 3], type: "scatter", }; const layout: Partial<Layout> = {}; return <Plot data={[trace]} layout={layout} />; } const element = document.getElementById("target"); if (element === null) { throw new Error("Element not found"); } // Runtime exception createRoot(element).render(<MyElement />);
But it results in Uncaught TypeError: (0 , import_factory.default) is not a function.
Uncaught TypeError: (0 , import_factory.default) is not a function
Actually, I needed to extract .default memeber before calling it.
.default
import Plotly, { type Layout, type PlotData } from "plotly.js-dist-min"; import { type ComponentType } from "react"; import { createRoot } from "react-dom/client"; import { type PlotParams } from "react-plotly.js"; import factory from "react-plotly.js/factory"; // Cast to make tsc happy // extract factory.default and name it createPlotlyComponent const createPlotlyComponent = ( factory as unknown as { default: (plotly: object) => ComponentType<PlotParams>; } ).default; const Plot = createPlotlyComponent(Plotly); export function MyElement() { const trace: Partial<PlotData> = { x: [1, 2, 3], y: [1, 2, 3], type: "scatter", }; const layout: Partial<Layout> = {}; return <Plot data={[trace]} layout={layout} />; } const element = document.getElementById("target"); if (element === null) { throw new Error("Element not found"); } // OK createRoot(element).render(<MyElement />);
I'm now planning to submit a PR.
I noticed it works fine with this tsconfig.json. Closing.
Thank you for making this awesome library!
Let me report a bug in the documentation and
.d.ts
file for TypeScript.Summary
I found a bug in documentation and associated type declaration.
Similar behavior is also reported here.
Package Versions
plotly.js-dist-min
2.28.0react
18.2.0react-dom
18.2.0react-plotly.js
2.6.0@types/react-plotly.js
2.6.3I'm using
esbuild
to bundle and runing it onBrave 120.1.61.114
(Arch Linux).Description
The document and
.d.ts
says thatcreatePlotlyComponent
can be used as follows:But it results in
Uncaught TypeError: (0 , import_factory.default) is not a function
.Actually, I needed to extract
.default
memeber before calling it.I'm now planning to submit a PR.