微信小程序原生开发中使用Chart.js报错问题记录
报错内容
WAServiceMainContext.js?t=wechat&s=1660287711817&v=2.25.0:1 TypeError: Cannot read property 'node' of null at Object. (Chart.umd.min.js? [sm]:formatted:1) at Function. (WAServiceMainContext.js?t=wechat&s=1660287711817&v=2.25.0:1) at :52460/appservice/ at WAServiceMainContext.js?t=wechat&s=1660287711817&v=2.25.0:1 at WAServiceMainContext.js?t=wechat&s=1660287711817&v=2.25.0:1 at Array.forEach () at WAServiceMainContext.js?t=wechat&s=1660287711817&v=2.25.0:1 at WAServiceMainContext.js?t=wechat&s=1660287711817&v=2.25.0:1 at WASubContext.js?t=wechat&s=1660287711817&v=2.25.0:1 at J (WASubContext.js?t=wechat&s=1660287711817&v=2.25.0:1)(env: Windows,mp,1.06.2206090; lib: 2.25.0) 对应代码
看下代码
.wxml
.js
var Chart = require('../../utils/Chart.umd.min.js');Page({ data: { chart: {} }, touchHandler(options) { this.chart = {};this.chart.config = createConfig();console.log(this.chart) this.chart.instance = new Chart('mychat', this.chart.config) function createConfig() {const data = {labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],datasets: [{label: 'Dataset 1',data: [10, 2, 3, 1, 2],backgroundColor: 'rgba(123,0,0,0.3)',fill: false,}]};return {type: 'pie',data: data,options: {responsive: true,},}} },})排查时踩过的坑
- 更换版本（无效）
- 更换开发工具基础库（无效）
问题原因
最后研究他人demo：将demo导入开发工具，可以运行，对比代码没有太大出入，但是我的代码始始终报错。
之后在我的工程中新建page，将demo代码移动过来， 还是报TypeError: Cannot read property 'node' of null。
将我的代码移动到demo的工程里，居然可以运行成功。
后来经过一番分析发现demo中chatJS的代码写在了page中，而我的是写在了Component，然后在index.wxml引用过的这个Component，代码如下：
index.json
index.wxml
总结
不能在Component中使用chatJS，改用其他图表组件
来源地址：https://blog.csdn.net/as350144/article/details/126307026
