如何在 Gatsby.js 中使用 BizCharts?

Avatarcoderfee/Nov 23, 2019/#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 />
}
//...
Copyright ©; 2016-2022 coderfee, All rights reserved.