如何在 Gatsby.js 中使用 BizCharts?

November 23,2019
0
Gatsby、可视化

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 />
}
//...


商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但是分发衍生作品时必须采用相同的许可协议。
本文采用 CC BY-NC-SA 4.0 - 非商业性使用 - 相同方式共享 4.0 国际进行许可。