AngularJS1遗留应用升级Lodash后JointJS报错的解决咨询

核心原因 #

JointJS 0.9.6内部依赖Lodash 3.x的_.defaultsDeep方法，但Lodash 4.x+已移除该方法，导致JointJS初始化时无法找到对应的mixin扩展，触发Cannot read properties of undefined (reading 'dee')错误。

可行解决方案 #

方案1：手动添加Lodash兼容方法（推荐） #

在应用最开始的初始化逻辑中（比如AngularJS的run块或入口脚本），给新版Lodash挂载兼容的defaultsDeep方法，模拟旧版行为：

// 兼容Lodash 3.x的defaultsDeep方法，适配新版Lodash
_.defaultsDeep = function(target, ...sources) {
  const result = _.clone(target);
  sources.forEach(source => {
    if (source == null) return;
    _.forEach(source, (value, key) => {
      if (_.isPlainObject(value) && _.isPlainObject(result[key])) {
        result[key] = _.defaultsDeep(result[key], value);
      } else if (_.isUndefined(result[key])) {
        result[key] = value;
      }
    });
  });
  return result;
};

这个方法仅覆盖target中未定义的属性，和旧版_.defaultsDeep行为一致，能让JointJS正常调用该方法，避免错误。

方案2：使用Lodash兼容补丁包 #

通过npm安装官方的兼容补丁包，自动给新版Lodash添加defaultsDeep方法：

1. 安装补丁包：

npm install lodash.defaultsdeep --save

2. 在应用入口引入补丁：

// AngularJS入口脚本或index.js中引入
require('lodash.defaultsdeep');

如果使用yarn或pnpm，可通过resolutions或overrides强制JointJS使用新版Lodash：

// package.json中添加
"overrides": {
  "jointjs": {
    "lodash": "^4.17.21"
  }
}

方案3：修改JointJS源码（不推荐） #

找到JointJS中出错的代码段，将依赖_.defaultsDeep的逻辑替换为新版Lodash的_.merge（需注意行为差异：merge会覆盖已有属性，而旧版defaultsDeep仅覆盖undefined属性），或者直接补全this.mixin.deep的定义。但修改源码会增加后续维护成本，除非其他方案不可行，否则不建议使用。

注意事项 #

• 升级JointJS未解决问题，大概率是因为新版本的JointJS仍依赖旧版Lodash的API，需仔细查看新版本的依赖文档确认兼容的Lodash版本。
• 注释JointJS代码虽然能临时运行，但会导致图形渲染、交互等功能失效，不建议作为长期解决方案。

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