使用Highcharts WordCloud渲染Emoji时偶现TypeError问题求助

在React中使用highcharts-react-official封装Highcharts WordCloud组件时，遇到Emoji作为输入数据的异常问题：多数情况下Emoji能正常渲染，但偶尔会触发TypeError: Cannot convert undefined or null to object错误。

已做排查 #

• 确认输入数据集非空且无undefined/null值
• 测试不同Emoji数组，发现部分Emoji初次触发错误后后续恢复正常
• 调整浏览器窗口大小、修改权重值或移除部分输入数据都可能重现错误，但无法定位到特定触发的Emoji值
• 查看WordCloud源码后，推测错误源于渲染Emoji时尝试遍历animatableAttribs对象的键，而该对象在错误发生时为null或undefined
• 尝试将series的animation设为false关闭动画，错误仍会出现

补充发现 #

在Emoji前添加至少2个字符的文本（例如“to 😃”而非单独“😃”）可规避错误，仅添加空格或空字符串无效。

相关代码 #

WordCloud.jsx #

import React, { useEffect, useState } from "react";
import HighchartsReact from "highcharts-react-official";
import Highcharts from "highcharts";
import addWordcloudModule from "highcharts/modules/wordcloud";

addWordcloudModule(Highcharts);

const WordCloud = ({ data }) => {
  const [chartOptions, setChartOptions] = useState({
    title: {
      text: ""
    },
    series: [
      {
        type: "wordcloud",
        data: [],
        name: "frequency"
      }
    ],
    tooltip: {
      headerFormat:
        '<span style="font-size: 16px"><b>{point.key}</b></span><br>'
    },
    plotOptions: {
      series: {
        minFontSize: 2,
        animation: false
      }
    }
  });

  const updateSeries = (data) => {
    const newSeries = [
      { type: "wordcloud", data: data.data, name: data.name ?? "frequency" }
    ];
    console.log(newSeries);
    setChartOptions({
      ...chartOptions,
      series: newSeries
    });
  };

  useEffect(() => {
    console.log(data);
    if (data) {
      updateSeries(data);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data]);

  return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
};

export default WordCloud;

App.jsx #

import { useState } from "react";
import "./styles.css";
import WordCloud from "./WordCloud";

const emojis = [
  {
    data: [
      {
        name: "😘",
        weight: 176
      },
      {
        name: "🏃🏻‍♀️",
        weight: 1
      },
      {
        name: "🤟",
        weight: 1
      },
      {
        name: "🤙",
        weight: 1
      },
      {
        name: "😣",
        weight: 1
      },
      {
        name: "🚁",
        weight: 1
      },
      {
        name: "😬",
        weight: 1
      },
      {
        name: "🧡",
        weight: 1
      }
    ]
  }
];

export default function App() {
  const [index, setIndex] = useState(0);

  const updateData = () => {
    const newIndex = (index + 1) % emojis.length;
    console.log(newIndex);
    setIndex(newIndex);
  };

  return (
    <div className="App">
      <button onClick={updateData}>Update Data</button>
      <h5>index = {index}</h5>
      <WordCloud data={emojis[index]} />
    </div>
  );
}

请问这是我的使用方式有误，还是Highcharts WordCloud对Emoji的支持不完善？

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