react-ace踩坑记录
使用 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>