document is not defined by next.js

[Pimaweichai]

The error happens when the bizCharts run in nextjs where will render from server:

[weepy3641]

@Pimaweichai

BizCharts is based G2, when chart‘s forceFit is true，G2 will use document to get some properties。
That's what i know, maybe g2 also used document to do something else.

Why you need run BizCharts in server render? Is this used to take a snapshot of chart ?
If be, you can use phantom or headless chrome instead, that's more easy.

[Pimaweichai]

@weepy3641 how can i close the forceFit?
the code is as below:

import {Chart, Axis, Tooltip, Geom} from "bizcharts";

const data = [
    {month:'1',temperature:20},
    {month:'2',temperature:30},
];

export default (
    <Chart height={400} data={data} forceFit>
        <Axis name="month" />
        <Axis name="temperature" label={{formatter: val => `${val}°C`}} />
        <Tooltip crosshairs={{type : "y"}} />
        <Geom type="line" position="month*temperature" size={2} color={'city'} />
        <Geom type='point' position="month*temperature" size={4} color={'city'} />
    </Chart>
)

I use the next.js to render all the react pages from server. So ....

[weepy3641]

@Pimaweichai

Do not use chart‘s forceFit property, and use the chart's width property instead.
the forceFit property will adapter the father container's width, width property will not.

I don's know whether that‘s ok, but try。

Also I will contact the G2 is anywhere used document..

[weepy3641]

@Pimaweichai
G2 replys many features used document.
Like color map calculation, tooltip, legend ...
You can add the issue in G2 to resolve it.

https://github.com/antvis/g2

[Pimaweichai]

@weepy3641

Really appreciate your help. I have created issue for G2.

[Pimaweichai]

@weepy3641 , Problem have solved. Another question is when BizCharts will support react 16?

[weepy3641]

@Pimaweichai
bizcharts react16 version will be released this week。
this version changes lots，we are already testing now。

[Pimaweichai]

@weepy3641 Ok, thanks.

[XinYueXiao]

@ weepy3641，问题解决了。另一个问题是BizCharts何时支持反应16？

我也遇到了这问题，你是怎么解决的

[chdharm]

@Pimaweichai May I know how did you solve this problem.
I am using react 16 with bizcharts 3.5 and getting ReferenceError: document is not defined.
I am facing this issue and not able to understand how to use https://github.com/JedWatson/exenv
this library. I am rendering this chart from Server side into a variable as a plain html and converting it into PDF directly. Express is my backend.

[dg92]

@chdharm @XinYueXiao @Pimaweichai how is this problem resolved?

[chdharm]

@dg92 Bizcharts is not backend renderable. So you need to drop the idea of using it for backend rendering.
Others can correct me if i am wrong.