React 中使用 braft-editor 踩坑记，引用 braft-utils 有错误

Posted 2021-11-05 一百个Chocolate

最近接到一个需求，需要支持在文本输入框支持图片粘贴上传，但是在我们这边管理页面，对于用户提的一些问题显示又不支持 Matkdown。

所以选择 braft-editor 来实现，发现提供一些配置项，因为我这边不需要那些加粗，下划线等等按钮，只需要上传图片，粘贴然后配合 COS 存链接就好了。

遇到的问题

首先我这个是 React 项目，其它项目不太清楚，然后使用 yarn。

在 utils 官方仓库中，有相关 issues，链接在下方：

引用 braft-utils 有错误 #500

其中也有人提及了一些解决方案，但是并没有解决问题，一直报错：

TS7016: Could not find a declaration file for module ‘braft-utils’. ‘xxx/node_modules/braft-utils/dist/index.js’ implicitly has an ‘any’ type.
Try npm i --save-dev @types/braft-utils if it exists or add a new declaration (.d.ts) file containing declare module 'braft-utils';

看这个报错信息，有提示，用 npm 安装那个依赖，我已经试过了，并没有效果，不存在那个依赖包。

解决方式

直接少废话，以下是解决方式：

yarn add braft-finder
yarn add braft-utils
yarn add draft-js-multidecorators
yarn add draftjs-utils

然后在你当前需要引入的文件那，同级目录底下创建一个名为 xxx.d.ts 文件，放入以下定义：

declare module 'braft-utils';
declare module 'braft-finder';

弄完之后记得重新 yarn dev ，之后就会出现如下页面，完美解决。

结尾

弄完这个问题，还就那个焦头烂额的，不过总算没有 bug 了，在这里记录一下，以免大家踩坑。