React动态加载three-dxf脚本后window对象无ThreeDxf问题咨询

可能的原因 #

• 库打包格式不匹配：你使用的three-dxf.js打包时没有配置UMD格式并指定全局导出变量名为ThreeDxf，如果是纯ES模块或CommonJS格式的打包产物，不会自动挂载到window对象上。
• 依赖缺失：three-dxf依赖Three.js运行，如果你没有在加载three-dxf之前完成Three.js的引入和初始化，three-dxf的初始化逻辑会执行失败，自然不会生成全局ThreeDxf对象。
• 路径错误：/dist/three-dxf.js的路径指向无效资源，比如返回404页面、资源内容不对。此时script的onload事件仍然会触发，但加载到的内容不是有效库代码，不会挂载对应对象。你可以打开浏览器开发者工具的「网络」面板，确认该资源请求状态为200，且响应内容是three-dxf的正确代码。
• useEffect重复执行：你当前的useEffect没有传入依赖数组，会在组件每次渲染时都重复创建script标签加载一次资源，多次重复加载会导致变量覆盖、初始化冲突，最终挂载失败。
• 全局变量名不符：部分版本的three-dxf打包后的全局变量名不是ThreeDxf（比如为小写开头的threeDxf），你可以在scriptLoaded回调中打印window对象，确认是否有对应命名的导出对象。

修复方案 #

1. 给useEffect添加空依赖数组，同时添加重复加载判断、错误监听和卸载清理逻辑，示例代码如下：

useEffect(() => {
    // 已加载过直接执行回调
    if (window.ThreeDxf) {
        scriptLoaded();
        return;
    }
    const script = document.createElement("script");
    script.type = 'text/javascript';
    script.src = '/dist/three-dxf.js';
    script.async = true;
    script.onload = () => scriptLoaded();
    script.onerror = () => console.error('three-dxf资源加载失败，请检查路径');
    document.head.appendChild(script);
    
    // 组件卸载时清理script标签
    return () => {
        document.head.removeChild(script);
    }
}, []); // 空依赖数组保证仅在组件首次挂载时执行一次

2. 提前加载Three.js依赖，保证Three.js加载完成后再加载three-dxf。
3. 如果是自行打包的three-dxf，修改打包配置为UMD格式，指定全局导出变量名：以webpack为例，配置output.library.name = 'ThreeDxf'、output.library.type = 'umd'、output.globalObject = 'this'，重新打包后再使用。
4. 如果不想修改打包配置，可直接通过ES模块导入的方式引入three-dxf，无需动态插入script标签。

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