React构建后Unlayer自定义工具不显示问题求助

问题描述 #

我开发了一个用Unlayer邮件编辑器的React应用，通过customJS字段引入外部托管的自定义工具，代码如下：

import EmailEditor from 'react-email-editor';

<EmailEditor 
  projectId={1071} 
  options={{
    customJS: [
      'https://cdn.jsdelivr.net/gh/maxt41/unlayer-tools@d874675d04fcf4942f7eef264119af8afc362f1d/LinkCaptureTool.js', 
      'https://cdn.jsdelivr.net/gh/maxt41/unlayer-tools@d874675d04fcf4942f7eef264119af8afc362f1d/UnsubscribeTool.js'
    ]
  }} 
  ref={emailEditorRef} 
/>

开发模式下编辑器能正常显示自定义工具，但生产构建后工具直接消失，控制台和React DevTools都没报错。试过重新构建、刷新CDN链接都没用，也不知道怎么把工具移到项目里作为customJS引用。

解决方案 #

1. 排查外部CDN问题

• 检查CDN资源的生产环境可用性：打开构建后的页面，在浏览器「网络」面板查看这两个JS文件的请求状态，是否存在404或跨域报错。
• 确认CDN文件完整性：直接访问你使用的CDN链接，验证文件内容是否和本地自定义工具代码一致，避免Git commit对应的文件被删除或修改。
• 调整加载时机：自定义JS需要在Unlayer编辑器初始化前加载完成，试试用onLoad回调确保编辑器加载后再注入工具，或者调整customJS里的链接顺序。

2. 将自定义工具移入项目内引用

如果外部CDN不稳定，直接把工具文件放到项目静态目录更靠谱：

• 把LinkCaptureTool.js和UnsubscribeTool.js复制到项目的public/custom-tools/文件夹（没有就新建）。
• 修改EmailEditor的配置，使用相对路径引用：

<EmailEditor
  projectId={1071}
  options={{
    customJS: [
      '/custom-tools/LinkCaptureTool.js',
      '/custom-tools/UnsubscribeTool.js'
    ]
  }}
  ref={emailEditorRef}
/>

• 注意不要让构建工具（比如Vite、Create React App）压缩或修改这些文件，Unlayer依赖工具里的全局变量/函数识别自定义功能，保持文件原始结构即可。

3. 额外排查方向

• 检查自定义工具代码：看看工具中是否使用了process.env这类仅在开发模式存在的变量，生产环境会导致代码执行失败。
• 验证Unlayer权限：确认projectId在生产环境有效，是否有权限加载自定义工具。
• 手动加载工具：试试在组件挂载后，通过编辑器实例手动加载自定义JS：

import { useEffect } from 'react';

// ...

useEffect(() => {
  if (emailEditorRef.current) {
    emailEditorRef.current.editor.loadCustomJS([
      '/custom-tools/LinkCaptureTool.js',
      '/custom-tools/UnsubscribeTool.js'
    ]);
  }
}, []);

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