React+TypeScript项目导入node-quill-converter库报错如何解决

• 你选用的node-quill-converter、node-quill-converter-improved都是仅支持Node.js服务端运行的库，依赖Node原生fs、path模块，浏览器环境没有这些API，直接在前端React项目导入必然报错。
• 导入路径不存在的报错是因为该库没有提供ESModule格式的导出，仅支持CommonJS的require语法，前端项目如果配置了"type": "module"或者TS的module设为ESNext的话，默认import语法无法识别其导出结构。

方案1：转换逻辑移到后端（最稳妥） #

如果你的项目有配套后端服务，直接把纯文本转Quill Delta的逻辑放到服务端接口里实现，前端只需要调用接口传入文本、接收返回的Delta对象即可，完全规避浏览器不兼容的问题。

方案2：前端用Quill原生能力替代，无需额外库 #

前端本身已经安装了Quill的话，完全可以自己实现纯文本转Delta的逻辑，代码如下：

import Quill from 'quill';

const convertTextToDelta = (text: string) => {
  const tempQuill = new Quill(document.createElement('div'));
  tempQuill.setText(text);
  return tempQuill.getContents();
};

直接调用上面的方法就能得到和node-quill-converter完全一致的转换结果，没有额外依赖，也不存在环境兼容问题。

方案3：非要在前端用这个库的兜底方案 #

如果一定要用这个库，需要给你的项目配置Node核心模块的浏览器polyfill：

• 如果你用的是Vite，需要在vite.config.ts里配置resolve.alias把fs、path映射到对应的浏览器polyfill包，还要安装@esbuild-plugins/node-globals-polyfill、rollup-plugin-node-polyfills等依赖补全全局变量
• 如果你用的是Webpack5，需要在webpack.config.js里配置resolve.fallback给fs、path指定polyfill，同时设置fs: 'empty'规避读取本地文件的逻辑
  注意：该方案会增大打包体积，且仍可能出现库内部逻辑不兼容的问题，优先推荐方案2

内容的提问来源于stack exchange，提问作者Mohamed Ibrahim