Autodesk Data Visualization扩展chronos-etu报t is read-only错误如何解决

错误触发原因 #

该报错的核心诱因是play方法中的临时变量t出现作用域冲突：

• 你贴出的是反编译后的源码逻辑，实际打包压缩后的chronos-etu.js中，t大概率被声明为了const只读类型，或是当前作用域下的t已经被其他代码块用const提前声明，后续给t赋值时就会触发只读报错
• 方法中存在附带拼写隐患：this._chronosManger拼写错误，正确应为_chronosManager，少了字母a，该问题不会触发当前报错，但可能导致后续功能异常
• pause、stop功能正常是因为这两个方法不需要声明该临时变量，不会触碰到作用域下的只读变量

修复方案 #

根据你是否可以修改第三方依赖源码分为两种处理方式：

可直接修改chronos-etu.js源码 #

直接重写play方法，更换变量名避免冲突，同时修正拼写错误：

play(e) {
    // 更换变量名避免和压缩后的只读变量冲突，同时直接在声明时初始化
    const startInstant = void 0 !== e ? new s.MomentInstant(e) : undefined;
    // 修正_manager的拼写错误
    this._chronosManager.setPlaybackPlayState(0, startInstant)
}

无法修改第三方依赖源码 #

在React组件挂载完成后，直接覆写chronos-etu实例的play方法：

import { MomentInstant } from 'chronos-etu/es/instants'; // 根据实际路径调整引入

useEffect(() => {
    // chronosSlider为你初始化的chronos-etu时间滑块实例
    if (chronosSlider) {
        chronosSlider.play = function(e) {
            const startInstant = e ? new MomentInstant(e) : undefined;
            this._chronosManager.setPlaybackPlayState(0, startInstant);
        }
    }
}, [chronosSlider])

两种方案都可以彻底解决t只读的报错，同时修正原代码的拼写隐患，避免后续出现其他功能异常。

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