Recibía el error "la ventana no está definida" al importar react-component-export-image así que usé una importación dinámica para solucionarlo. Ya no recibo ese error, pero ahora obtengo ' exportComponentAsPNG(componentRef) no es una función'. ¿Hay una mejor manera de lidiar con el error 'la ventana no está definida' o una forma de usar la función que estoy importando dinámicamente? Si no, ¿hay una biblioteca npm diferente que funcione para generar una imagen a partir de un componente de reacción?
import React, { useRef } from 'react' // import { exportComponentAsPNG } from 'react-component-export-image' *This gave window not defined error so I used dynamic import* import dynamic from 'next/dynamic' import ProductCard from '../ProductCard/ProductCard.component' import Button from '../Button/Button.component' const { exportComponentAsPNG } = dynamic( () => import('react-component-export-image'), { ssr: false } ) const Plaque = () => { const componentRef = useRef() // eslint-disable-next-line react/display-name const ComponentToPrint = React.forwardRef((props, ref) => { return ( <div ref={ref}> <ProductCard /> </div> ) }) return ( <ComponentToPrint ref={componentRef} /> <button onClick={() => exportComponentAsPNG(componentRef)}> // "Error: exportComponentAsPNG is not a function" Export As PNG </button> ) } export default Plaquenext/dynamic se usa para importar dinámicamente componentes de React, no funciones o bibliotecas de JavaScript regulares.
Para eso, puede usar una importación dinámica regular en exportComponentAsPNG dentro de la devolución de llamada onClick .
<button onClick={async () => { const { exportComponentAsPNG } = await import('react-component-export-image') exportComponentAsPNG(componentRef) }}>La función exportComponentAsPNG necesita acceso a la window que no está definida con la representación del lado del servidor. Pude solucionar el problema importando dinámicamente el componente Plaque que usaba exportComponentAsPNG a la página donde se llama con la representación del lado del servidor establecida en 'falso'.
import dynamic from 'next/dynamic' const Plaque = dynamic(() => import('../compnonents/Plaque'), { ssr: false }) const Page = () => { return <Plaque /> } export default PageAhora que el componente ya no usa SSR, pude importar y usar la función normalmente.
import { exportComponentAsPNG } from 'react-component-export-image'Aquí puede encontrar la documentación de la biblioteca: https://www.npmjs.com/package/react-component-export-image