React项目使用tfjs-vis绘制折线图报TypeError错误求助

错误原因 #

该错误源于vega-lite内部正则处理逻辑异常，大概率是依赖版本冲突导致——你的项目中可能存在多个版本的vega/vega-lite，或者安装的版本与tfjs-vis 1.5.1的要求不匹配。

解决方案 #

1. 锁定vega-lite依赖版本 #

tfjs-vis 1.5.1依赖的vega-lite版本为^4.17.0，你需要强制项目使用该版本：

• 如果你用npm，在package.json中添加overrides：

  "overrides": {
    "vega-lite": "4.17.0"
  }
  

• 如果你用yarn，在package.json中添加resolutions：

  "resolutions": {
    "vega-lite": "4.17.0"
  }
  

然后执行npm install或yarn install重新安装依赖。

2. 修正数据格式 #

tfjs-vis 1.5.1对linechart的数据格式有严格要求，尝试将数据结构调整为数组对象形式（替代原嵌套数组格式）：

// 替换原data定义
const data = [
  { name: 'First', values: series1 },
  { name: 'Second', values: series2 }
];

3. 确保React组件挂载后再绘制图表 #

在React中，必须等待DOM节点挂载完成后再调用tfvis的渲染方法，将代码放在useEffect钩子中：

import { useEffect } from 'react';
import * as tfvis from '@tensorflow/tfjs-vis';

export default function LineChart() {
  useEffect(() => {
    // 生成数据
    const series1 = Array(100).fill(0)
      .map(y => Math.random() * 100 - Math.random() * 50)
      .map((y, x) => ({ x, y }));

    const series2 = Array(100).fill(0)
      .map(y => Math.random() * 100 - Math.random() * 150)
      .map((y, x) => ({ x, y }));

    // 修正后的数据格式
    const data = [
      { name: 'First', values: series1 },
      { name: 'Second', values: series2 }
    ];

    const surface = { name: 'Line chart', tab: 'Charts' };
    tfvis.render.linechart(surface, data);

    // 组件卸载时清理图表
    return () => {
      tfvis.removeSurface(surface.name, surface.tab);
    };
  }, []);

  // 提供tfjs-vis的根容器
  return <div id="tfjs-vis-root"></div>;
}

4. 排查重复依赖 #

执行以下命令查看项目中vega-lite的版本情况：

# npm
npm ls vega-lite

# yarn
yarn list vega-lite

如果输出显示多个版本，说明存在依赖冲突，按步骤1锁定版本即可解决。

内容的提问来源于stack exchange，提问作者Linky