reactjs - AmCharts i NextJS - SyntaxError: Uventet token 'export'

Når jeg forsøkte å bruke '@amcharts/amcharts4/core'-pakken og andre amchart-moduler innen et NextJS-prosjekt, fikk jeg en feil:

SyntaxError: Unexpected token 'export'

Etter å ha lest mange innlegg og informasjon om det, fant jeg denne saken veldig nyttig, noe som tillot meg å finne løsningen, som er dynamiske importer. Jeg vil dele løsningen nedenfor om hvordan jeg løste det.

https://github.com/amcharts/amcharts4/issues/272

Svar #1

Løsningen på dette problemet for meg var å bruke NextJS dynamiske imports slik at du isolerer amcharts-koden innenfor en komponent og deretter importerer komponenten dynamisk KUN på klientsiden, ikke under SSR.

// Create a psuedo component using dynamic import that will only be imported client-side
const Chart = dynamic(() => import('./ChartComponent'), {
  ssr: false
})

./ChartComponent bør ha alle dine amcharts-importer i seg, som nå er isolert og kun vil bli importert på klienten og bør fungere helt fint.

Deretter rendrer du komponenten som vanlig

return <Chart chartData={chartData} />

Dokumentasjon for dynamiske imports her: https://nextjs.org/docs/advanced-features/dynamic-import

Relaterte artikler