Next.js: ReferenceError: document is not defined

[jshuadvd]

Bug Report

Anytime I import any map from viser-react or biz-charts with the examples from the site I get the following error:

Note: I do not have this issue when not using nextjs

ReferenceError: document is not defined
    at Object.module.exports (/node_modules/viser/node_modules/@antv/g2/build/g2.js:12068:13)
    at __webpack_require__ (/node_modules/viser/node_modules/@antv/g2/build/g2.js:30:30)
    at Object.<anonymous> (/node_modules/viser/node_modules/@antv/g2/build/g2.js:11787:14)
    at __webpack_require__ (/node_modules/viser/node_modules/@antv/g2/build/g2.js:30:30)
    at Object.<anonymous> (/node_modules/viser/node_modules/@antv/g2/build/g2.js:157:18)
    at __webpack_require__ (/node_modules/viser/node_modules/@antv/g2/build/g2.js:30:30)
    at Object.defineProperty.value (/node_modules/viser/node_modules/@antv/g2/build/g2.js:23351:12)
    at __webpack_require__ (/node_modules/viser/node_modules/@antv/g2/build/g2.js:30:30)
    at Object.<anonymous> (/node_modules/viser/node_modules/@antv/g2/build/g2.js:2881:11)
    at __webpack_require__ (/node_modules/viser/node_modules/@antv/g2/build/g2.js:30:30)
    at Object.<anonymous> (/node_modules/viser/node_modules/@antv/g2/build/g2.js:792:9)
    at __webpack_require__ (/node_modules/viser/node_modules/@antv/g2/build/g2.js:30:30)
    at Object.defineProperty.value (/node_modules/viser/node_modules/@antv/g2/build/g2.js:22102:9)
    at __webpack_require__ (/node_modules/viser/node_modules/@antv/g2/build/g2.js:30:30)
    at Object.<anonymous> (/node_modules/viser/node_modules/@antv/g2/build/g2.js:48586:10)
    at __webpack_require__ (/node_modules/viser/node_modules/@antv/g2/build/g2.js:30:30)

_Not sure what to do here. This is a copy of my package.json_

{
  "name": "with-ant-design-less",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@antv/g2": "^3.5.4",
    "@zeit/next-less": "^1.0.1",
    "antd": "^3.5.4",
    "babel-plugin-import": "^1.7.0",
    "bizcharts": "^3.5.3-beta.0",
    "deck.gl": "^7.0.8",
    "jquery": "^3.4.1",
    "less": "3.0.4",
    "less-vars-to-js": "1.3.0",
    "next": "8.1.0",
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "viser-react": "^2.4.6"
  },
  "license": "ISC"
}

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to the sandbox here
2. See error

Expected behavior

The Chart should import as expected and render on the page.

[ijjk]

Hi, this is due to one of those packages trying to reference document during SSR which doesn't exist since the document is client side only. You can conditionally import them by doing.

let myClientPkg;

if (typeof window !== 'undefined') {
  myClientPkg = require('some-pkg')
}

I'm gonna close this since it's not a really an issue with Next.js. If you are still having trouble feel free to reply.