526互联

react-ace踩坑记录

发布时间 2023-03-30 17:24:16作者: 晚安喵

使用 diffEditor 时，文档上获取 diff 未导出

// 在 6.0版本时会出现这个问题
import { diff as DiffEditor } from "react-ace"; // 文档错误写法
import DiffEditor from "react-ace/lib/diff"; // 正确方式

当有 theme、mode 配置时，会出现找不到文件 404

报错信息 theme-github.js、mode-json.js 访问 404

解决方案：引入 mode 和主题文件：
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-github";

worker-json load fail

https://github.com/securingsincity/react-ace/issues/725

由于 import "ace-builds/src-noconflict/mode-json"时,会加载 worker-json.js, 此时获取到 url 地址是相对于当前服务的

解决方案：

  • 引入 webpack-resolver 来加载所用到的文件
import "ace-builds/webpack-resolver";
import 'ace-builds';
// 由于webpack-resolver里用到file-loader来加载文件，这里需要安装file-loader
pnpm add file-loader
  • 指定 ace 的 basePath
import ace from "ace-builds";
ace.config.set(
  "basePath",
  "https://cdn.jsdelivr.net/npm/ace-builds@1.4.3/src-noconflict/"
);
// 由于是第三方的cdn路径，需要将其文件上传到自身项目的cdn上
  • 通过设置 useWorker:false
<DiffEditor setOptions={{ useWorker: false }}></DiffEditor>