使用Monaco Editor编辑JSON时出现SyntaxError报错求助

问题描述 #

使用Monaco Editor编辑JSON数据时触发SyntaxError，错误源自monaco-editor包的dom.js文件，具体报错信息：

"Could not parse entire input - got stuck at position 87 ?:[\w_])+))?"

当前使用的依赖版本：

• react-monaco-editor@0.55.0
• monaco-editor-webpack-plugin@^7.1.0
• monaco-editor@0.48.0

排查与解决步骤 #

1. 修复依赖版本不兼容问题 #

react-monaco-editor@0.55.0与monaco-editor@0.48.0版本匹配度不足，过高的monaco-editor版本会导致内部语法解析逻辑冲突。执行以下命令调整版本：

npm uninstall monaco-editor
npm install monaco-editor@0.38.0 --save

2. 检查Webpack插件配置 #

确认config.overrides.js中monaco-editor-webpack-plugin已正确配置JSON语言支持，避免语法解析器加载异常：

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

module.exports = function override(config, env) {
  config.plugins.push(
    new MonacoWebpackPlugin({
      languages: ['json'] // 必须显式声明json语言
    })
  );
  return config;
};

3. 验证组件初始数据与逻辑 #

检查JsonText.js组件：

• 确认传入value属性的是合法JSON字符串（如初始值设为'{}'而非无效格式）
• 移除组件中可能覆盖Monaco内置JSON验证的自定义解析逻辑

4. 清除缓存重新构建 #

依赖调整后清除缓存，避免旧代码残留：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install
npm run build

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