如何在 Gatsby.js 中使用 BizCharts？

BizCharts 是阿里前端团队开源的一款基于 React 开发的数据可视化框架。今天上午想给博客书单加一个数据统计的功能，便引入了 BizCharts，但在编译的时候出现了 document not defined 的错误，这是服务端渲染模式下的典型问题。

解决过程

我的博客是基于 Gatsby.js 开发的，所以我想它肯定会做对应的处理，参见文档，在 gatsby-node.js 中加入以下代码：

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /bizcharts/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

但奇怪的是问题没有解决。

于是经过几分钟的 Google，终于在 GitHub 上找到了一个 issue，它的做法是使用环境变量来判断是否处于客户端，如下：

let bizcharts;

if (process.browser) {
  bizcharts = require('bizcharts');
}

//...
render() {
  return <bizcharts.Chart />
}
//...