Vue2安装vue-diagram-editor后npm run serve报Unexpected token语法错误

问题原因 #

你遇到的编译错误源于vue-diagram-editor依赖包内部存在非法JavaScript语法：代码中的AllRTEvents[i].[i2]写法不符合规范，正确的访问方式应为AllRTEvents[i][i2]。测试项目能正常运行，是因为其Babel/打包工具的配置或版本对这种错误语法有兼容处理，而主项目的打包环境语法校验更严格，且转译规则未覆盖到该依赖包。

解决办法 #

1. 修复依赖包语法错误（持久化方案） #

• 找到项目根目录下node_modules/vue-diagram-editor中报错的InstructorReadings.vue和Reading.vue文件，将AllRTEvents[i].[i2]修改为AllRTEvents[i][i2]。
• 安装patch-package工具避免重新安装依赖后修改失效：

  npm install patch-package --save-dev
  

• 生成补丁文件：

  npx patch-package vue-diagram-editor
  

  后续执行npm install时，补丁会自动应用到依赖包。

2. 确保依赖包被正确转译 #

检查vue.config.js中的transpileDependencies配置，确保将vue-diagram-editor纳入转译范围：

module.exports = {
  transpileDependencies: ['vue-diagram-editor']
}

若之前配置未生效，可尝试更新Babel相关依赖：

npm update @babel/core @babel/preset-env

3. 对齐测试项目与主项目的依赖版本 #

对比两个项目的package.json，重点查看vue-cli-service、@babel/core、@babel/preset-env的版本，将主项目对应依赖版本调整为与测试项目一致，然后重新安装依赖：

rm -rf node_modules package-lock.json
npm install

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