Estoy tratando de usar el paquete lightweight-charts en mi proyecto nextjs , sin embargo, cuando intento llamar a la función createChart , aparece este error en mi consola nodejs.
...\lightweight-charts\dist\lightweight-charts.esm.development.js:7 import { bindToDevicePixelRatio } from 'fancy-canvas/coordinate-space'; ^^^^^^ SyntaxError: Cannot use import statement outside a moduleComponente:
import styled from "styled-components" import { createChart } from 'lightweight-charts'; const Wrapper = styled.div`` const CoinPriceChart = () => { const chart = createChart(document.body, { width: 400, height: 300 }); return <Wrapper></Wrapper> } export default CoinPriceChartPágina:
import styled from "styled-components" import CoinPriceChart from "../../components/charts/CoinPriceChart" const Wrapper = styled.div`` const CoinDetailPage = () => { return ( <Wrapper> <CoinPriceChart /> </Wrapper> ) } export default CoinDetailPage¿Alguien tiene una idea de lo que podría hacer para permitirme usar la biblioteca dentro de nextjs? ¡Gracias!
Eso porque está intentando importar la biblioteca en contexto SSR. Usar next.js Dynamic con ssr ssr : false debería solucionar el problema:
import styled from "styled-components" import dynamic from "next/dynamic"; const CoinPriceChart = dynamic(() => import("../../components/charts/CoinPriceChart"), { ssr: false }); const Wrapper = styled.div`` const CoinDetailPage = () => { return ( <Wrapper> <CoinPriceChart /> </Wrapper> ) } export default CoinDetailPage