TradingView Chart Library在React项目Nginx生产环境报UDFCompatibleDatafeed错误

你使用的UDFCompatibleDatafeed是挂载在window.Datafeeds全局对象下的API，该对象由public/datafeeds目录下的umd脚本注入生成。本地开发服务会正确处理public目录下的静态资源加载，所以能正常拿到对象；打包后部署出现报错，本质是脚本未被正确加载、或者你在脚本加载完成前就调用了该对象。

• 第一步：在项目的public/index.html入口文件中，提前引入datafeeds的udf脚本，路径对应你public下的文件位置即可，示例代码如下，建议将该script放在body标签最顶部，保证优先加载：

<script src="/datafeeds/udf/dist/bundle.js"></script>

• 第二步：调整初始化逻辑，不要直接在useEffect中调用window.Datafeeds，先做兜底判断，确保对象存在再执行初始化，避免加载时序问题导致报错，代码修改示例：

// useEffect内部初始化widget前先做判断
if (!(window as any).Datafeeds?.UDFCompatibleDatafeed) {
  // 可根据需求替换为重试逻辑
  setTimeout(() => window.location.reload(), 1000)
  return
}
const widgetOptions: ChartingLibraryWidgetOptions = {
  // 其余原有配置保持不变
  datafeed: new (window as any).Datafeeds.UDFCompatibleDatafeed(defaultProps.datafeedUrl),
  // 其余原有配置保持不变
}

• 第三步：检查Nginx配置，确保public下的charting_library和datafeeds两个目录的静态资源都能被正常访问，无404报错。如果你的站点部署在二级子路径下，需要将配置中的libraryPath改为对应子路径前缀，比如部署在/trade路径下，libraryPath就改为/trade/charting_library/，同时html中的script引入路径也要对应调整。
• 第四步：确认打包后的build目录中确实存在datafeeds和charting_library两个文件夹，如果你使用自定义打包配置，需要添加规则将这两个目录复制到打包产物根目录。

• 你当前将charting_library同时复制到/public和/src目录属于冗余配置，/src下的charting_library仅需要保留TS类型声明文件即可，运行时依赖的js、css资源全部由/public下的charting_library目录提供，不会影响功能还能减少打包体积。

内容的提问来源于stack exchange，提问作者BF.Safouen