Uso @nivo/pie con "gatsby": "^3.13.0" . Pero recibí un error cuando construí Gatsby. WebpackError: ReferenceError: ResizeObserver is not defined La versión de Nivo es "@nivo/pie": "^0.79.1". No tengo idea para solucionarlo. Agradecería si me pudieran dar algún consejo.
Y aquí está el código React usando el gráfico circular de nivo.
PieChart.tsx
import React from 'react' import { ResponsivePie } from '@nivo/pie' const PieChart: React.FC = ({ data }) => { return ( <> <div> <ResponsivePie data={data} margin={{ top: 30, right: 80, bottom: 70, left: 80 }} borderColor={{ from: 'color', modifiers: [ [ 'darker', 0.2, ], ], }} arcLabelsTextColor={{ from: 'color', modifiers: [ [ 'darker', 2, ], ], }} fill={[ { match: { id: 'ruby', }, id: 'dots', }, ]} legends={[ { anchor: 'bottom-right', direction: 'column', justify: false, translateX: 0, translateY: -1, }, ]} /> </div> </> ) } export default PieChart================================================== =================
Pude arreglarlo después de actualizar gatsby-node.js. Pero recibí otro error WebpackError: Minified React error #130; . Y podría arreglarlo con este código final. No hay error de compilación.
PieChart.tsx
import React from 'react' import { ResponsivePie } from '@nivo/pie' const PieChart: React.FC = ({ data }) => { return ( <> {typeof window !== 'undefined' && ResponsivePie && <ResponsivePie data={data} ... />} </> ) } export default PieChartGracias.
Intente usar un cargador nulo en el SSR de Gatsby. En tu gatsby-node.js :
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => { if (stage === "build-html") { actions.setWebpackConfig({ module: { rules: [ { test: /@nivo\/pie/, use: loaders.null(), }, ], }, }) } } Normalmente, este tipo de problema ( gatsby gatsby develop OK frente a gatsby gatsby build KO ) está relacionado con la agrupación de paquetes web en el servidor (renderización del lado del servidor), especialmente cuando se trata de dependencias de terceros que interactúan con la window u otros objetos globales ( como document ) como lo hacen los módulos de gráfico. Esto sucede porque cuando ejecutas la gatsby build , tu código es interpretado por el servidor Node, donde aún no hay una ventana disponible. Por otro lado, el gatsby develop es interpretado por el navegador, donde lo hay.
Con este enfoque, está agregando un cargador ficticio ( null ) a los paquetes web para cargar la dependencia en el lado del cliente, donde está disponible la window .
Tenga en cuenta que test: /@nivo\/pie/ es una expresión regular (por eso está entre barras, / ) que prueba la carpeta node_modules , así que asegúrese de que /@nivo\/pie/ sea una ruta válida.