Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Document is not defined #11885

Closed
Dogtiti opened this issue Feb 19, 2019 · 3 comments
Closed

Document is not defined #11885

Dogtiti opened this issue Feb 19, 2019 · 3 comments
Labels
type: documentation An issue or pull request for improving or updating Gatsby's documentation type: question or discussion Issue discussing or asking a question about Gatsby

Comments

@Dogtiti
Copy link

Dogtiti commented Feb 19, 2019

Description

Successfully run in gatsby develop,but failed at gatsby build

Steps to reproduce

I have used bizcharts,it caused the problem,and the package.json:

  "dependencies": {
    "@antv/data-set": "^0.10.1",
    "bizcharts": "^3.4.3",
    "gatsby": "^2.0.76",
    "gatsby-image": "^2.0.20",
    "gatsby-plugin-less": "^2.0.9",
    "gatsby-plugin-manifest": "^2.0.9",
    "gatsby-plugin-offline": "^2.0.16",
    "gatsby-plugin-react-helmet": "^3.0.2",
    "gatsby-plugin-sharp": "^2.0.14",
    "gatsby-source-filesystem": "^2.0.8",
    "gatsby-source-mongodb": "^2.0.10",
    "gatsby-transformer-sharp": "^2.1.8",
    "less": "^3.9.0",
    "lodash": "^4.17.11",
    "prop-types": "^15.6.2",
    "rc-bmap": "^1.0.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-helmet": "^5.2.0"
  }

Expected result

Successfully run gatsby build

Actual result

error Building static HTML for pages 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__

Environment

 System:
    OS: macOS 10.14.3
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
    Yarn: 1.12.1 - /usr/local/bin/yarn
    npm: 6.8.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 72.0.3626.109
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.0.76 => 2.0.76
    gatsby-image: ^2.0.20 => 2.0.25
    gatsby-plugin-less: ^2.0.9 => 2.0.9
    gatsby-plugin-manifest: ^2.0.9 => 2.0.12
    gatsby-plugin-offline: ^2.0.16 => 2.0.20
    gatsby-plugin-react-helmet: ^3.0.2 => 3.0.5
    gatsby-plugin-sharp: ^2.0.14 => 2.0.16
    gatsby-source-filesystem: ^2.0.8 => 2.0.20
    gatsby-source-mongodb: ^2.0.10 => 2.0.10
    gatsby-transformer-sharp: ^2.1.8 => 2.1.9
  npmGlobalPackages:
    gatsby-cli: 2.4.8
    gatsby: 2.0.82
@gatsbot gatsbot bot added the type: documentation An issue or pull request for improving or updating Gatsby's documentation label Feb 19, 2019
@jonniebigodes
Copy link

@Dogtiti can you share a repo with the code you're using? Or a dummy repository that demonstrates this issue?

@jonniebigodes jonniebigodes added the type: question or discussion Issue discussing or asking a question about Gatsby label Feb 19, 2019
@jonniebigodes
Copy link

@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 Page2

Issuing 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:
dev_mode_result

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:1

Doing 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
Copy link
Contributor

DSchau commented Feb 19, 2019

@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 💜

@DSchau DSchau closed this as completed Feb 19, 2019
@niklasramo niklasramo mentioned this issue Jul 11, 2019
Closed
@harsh242 harsh242 mentioned this issue Mar 16, 2021
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type: documentation An issue or pull request for improving or updating Gatsby's documentation type: question or discussion Issue discussing or asking a question about Gatsby
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@DSchau @jonniebigodes @Dogtiti