jonniebigodes
commented
5 years ago @Dogtiti can you share a repo with the code you're using? Or a dummy repository that demonstrates this issue?
Closed Dogtiti closed 5 years ago
jonniebigodes
commented
5 years ago @Dogtiti can you share a repo with the code you're using? Or a dummy repository that demonstrates this issue?
jonniebigodes
commented
5 years ago @Dogtiti i've created a new Gatsby website based on the hello world starter, just to get a bare bones site up and running.
Added the dependencies you mentioned in your issue description.
Searched for a example so that i could try to reproduce the behaviour and it led me this.
Created a new page called page2 under pages folder and inside the following code:
import React, { Component } from 'react'
import { G2, Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape, Facet, Util } from 'bizcharts'
import DataSet from '@antv/data-set'
class Page2 extends Component {
state = {
chartData: [
{
year: '1986',
ACME: 162,
Compitor: 42,
},
{
year: '1987',
ACME: 134,
Compitor: 54,
},
{
year: '1988',
ACME: 116,
Compitor: 26,
},
{
year: '1989',
ACME: 122,
Compitor: 32,
},
{
year: '1990',
ACME: 178,
Compitor: 68,
},
{
year: '1991',
ACME: 144,
Compitor: 54,
},
{
year: '1992',
ACME: 125,
Compitor: 35,
},
{
year: '1993',
ACME: 176,
Compitor: 66,
},
{
year: '1994',
ACME: 156,
},
{
year: '1995',
ACME: 195,
},
{
year: '1996',
ACME: 215,
},
{
year: '1997',
ACME: 176,
Compitor: 36,
},
{
year: '1998',
ACME: 167,
Compitor: 47,
},
{
year: '1999',
ACME: 142,
},
{
year: '2000',
ACME: 117,
},
{
year: '2001',
ACME: 113,
Compitor: 23,
},
{
year: '2002',
ACME: 132,
},
{
year: '2003',
ACME: 146,
Compitor: 46,
},
{
year: '2004',
ACME: 169,
Compitor: 59,
},
{
year: '2005',
ACME: 184,
Compitor: 44,
},
],
chartheight: 600,
}
componentDidMount() {
if (typeof window !== 'undefined') {
this.setState({ chartheight: window.innerHeight })
window.addEventListener('resize', this.handleWindowSizeChange)
}
}
componentWillUnmount() {
if (typeof window !== 'undefined') {
window.removeEventListener('resize', this.handleWindowSizeChange)
}
}
handleWindowSizeChange = () => {
this.setState({
chartheight: window.innerHeight,
})
}
render() {
const { chartData, chartheight } = this.state
var dv = new DataSet.View().source(chartData)
dv.transform({
type: 'fold',
fields: ['ACME', 'Compitor'],
key: 'type',
value: 'value',
})
const chartscale = {
value: {
alias: 'The Share Price in Dollars',
formatter: function(val) {
return '$' + val
},
},
year: {
range: [0, 1],
},
}
return(
<div>
<Chart height={chartheight} data={dv} padding={'auto'} scale={chartscale} forceFit>
<Tooltip crosshairs />
<Axis />
<Legend />
<Geom type="area" position="year*value" color="type" shape="smooth" />
<Geom type="line" position="year*value" color="type" shape="smooth" size={2} />
</Chart>
</div>
)
}
}
export default Page2Issuing gatsby develop and opening a new browser window to http://localhost:8000/page2 shows me the chart without any issues as you can see below:
Issuing gatsby build && gatsby serve throws the error you mentioned.
Namely:
error Building static HTML failed
See our docs page on debugging HTML builds for help https://gatsby.app/debug-html
4 | * @return {HTMLElement} DOM 节点
5 | */
> 6 | var TABLE = document.createElement('table');
| ^
7 | var TABLE_TR = document.createElement('tr');
8 | var FRAGMENT_REG = /^\s*<(\w+|!)[^>]*>/;
9 | var CONTAINERS = {
WebpackError: ReferenceError: document is not defined
- create-dom.js:6 Object../node_modules/@antv/util/lib/dom/create-dom.js
[lib]/[@antv]/util/lib/dom/create-dom.js:6:1
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- common.js:31 Object../node_modules/@antv/g/lib/util/common.js
[lib]/[@antv]/g/lib/util/common.js:31:14
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- index.js:1 Object../node_modules/@antv/g/lib/util/index.js
[lib]/[@antv]/g/lib/util/index.js:1:18
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- canvas.js:1 Object../node_modules/@antv/g/lib/canvas.js
[lib]/[@antv]/g/lib/canvas.js:1:12
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- index.js:2 Object../node_modules/@antv/g/lib/index.js
[lib]/[@antv]/g/lib/index.js:2:11
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- renderer.js:1 Object../node_modules/@antv/g2/lib/renderer.js
[lib]/[@antv]/g2/lib/renderer.js:1:9
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- core.js:3 Object../node_modules/@antv/g2/lib/core.js
[lib]/[@antv]/g2/lib/core.js:3:9
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- index.js:3 Object../node_modules/bizcharts/es6/index.js
[lib]/[bizcharts]/es6/index.js:3:13
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1Doing a bit of searching led me to this and reading the comments in there to this.
With that, it looks like that the package is not ssr (server side rendering) friendly, with that not "gatsby friendly". From what i've seen it looks like g2 is more inclined to the client side rendering. With Gatsby we are on the other side of the spectrum, on the server side of rendering, and when g2/bizcharts tries to access the dom, it will throw this error, because in this case the dom will only be accessible when the page is sent back to the client and rehydrated. There's a fix that someone posted in the comments, but i haven't tested it out and personally i don't feel that confortable with that approach. I'll leave it to you to see if it solves your issue.
Feel free to provide feedback
DSchau
commented
5 years ago @jonniebigodes excellent debugging!
@Dogtiti you'll want to check out this document and add bizcharts to the ignored list like shown.
If you're able, I'd recommend swapping to an SSR friendly charting library, but if you're unable you can remediate like so.
Going to close this out--but please feel free to comment and we'll re-open if we can help further!
Thanks for using Gatsby 💜
Description
Successfully run in
gatsby develop,but failed atgatsby buildSteps to reproduce
I have used
bizcharts,it caused the problem,and thepackage.json:Expected result
Successfully run
gatsby buildActual result
Environment