Build error with NextJs

[Lunatial]

Hi, I faced some difficulties which I cannot solve, so I am here for help.
I would like to use fusioncharts but in the built project the charts do now show up, and the console throws an error: Uncaught SyntaxError: Unexpected token ( .

I recreated the basics in a new example NextJS app and also had the same problem when I build it, you can check it out: https://github.com/Lunatial/FusionCharts

Another problem of mine is that (I could only try it in development mode) the fusionCharts tried to download google-fonts by CDN, and I do not know how to disable that effort.

[ashok1994]

Hi @Lunatial ,
Thanks for reporting the issue, we are working on the fix

[rohanoid5]

Hi @Lunatial react-fusioncharts currently doesn't support SSR yet, so you can't use the library with Next.js as of now.

[theorytank]

Re: "Uncaught SyntaxError: Unexpected token ("

in bundle.min.js

I'm having the same issue here in my ReactJS project. It's only on the production build (dev is fine). As well, no SSR or Next.js in my project. However it is the trial version of the library as I wanted to show the client a quick test run before committing. I can do that with a dev build as well, but it makes me hesitate purchasing licenses if I can't get past this issue.

Happy to provide more info.

[ShashankSurvase]

Re: "Uncaught SyntaxError: Unexpected token ("

in bundle.min.js

I'm having the same issue here in my ReactJS project. It's only on the production build (dev is fine). As well, no SSR or Next.js in my project. However it is the trial version of the library as I wanted to show the client a quick test run before committing. I can do that with a dev build as well, but it makes me hesitate purchasing licenses if I can't get past this issue.

Happy to provide more info.

I'm facing the same issue in my ReactJS project.

[rohanoid5]

@Lunatial did you create your ReactJS project with create-react-app? or any other way you're bundling your application please share it here.

[divo93]

Hi, I am having the same issue with React.Js Project. I didn't use create-react-app but customized web pack configurations -

webpack.config.txt

[rohanoid5]

@divo93 can you please share how you have imported FusionCharts and react-fusioncharts in your component? Also it will be helpful if you share a scaled down version of your code of the component where you are using react-fusioncharts.

[divo93]

@rohanoid5 attaching the file of the working code.
Bar.txt

[bhujoshi]

Facing same issue with my react project

[rohanoid5]

@divo93 please update react-fusioncharts and check the second way of importing fusioncharts and react-fusioncharts from this link

[davidkell]

If you don't need the SSR feature, you can just use a dynamic import with SSR disabled.

[csandman]

If you don't need the SSR feature, you can just use a dynamic import with SSR disabled.

This is what I'm currently doing however it's kind of messy, because of the initialization you have to do on the chart package once it's imported. I'm still working on figuring out the best way to handle this.

[AyanBhadury]

Follow this guide for rendering charts using Nextjs : https://ayon-bony.medium.com/rendering-fusioncharts-using-next-js-9630210c2854

[georgianaf]

Follow this guide for rendering charts using Nextjs : https://ayon-bony.medium.com/rendering-fusioncharts-using-next-js-9630210c2854

@AyanBhadury I cloned the repo from your example, but when running npm run build it still throws a build error
Error occurred prerendering page "/next-fusioncharts" https://err.sh/zeit/next.js/prerender-error: ReferenceError: document is not defined, any idea why?

[Larry741]

georgianaf
Did you figure out a solution to this problem?

[georgianaf]

@Larry741 no, I was not able to find a solution so I abandoned fusioncharts and used ant charts in my nextjs app