如何在React TypeScript中动态导入外部URL托管的JS模块？

你遇到的Unexpected token 'export'错误，本质是浏览器没有把外部的order.js当作ES模块解析，而是按普通脚本处理，导致无法识别export语法。下面是具体的解决思路和方案：

核心原因 #

外部服务器返回的order.js没有被浏览器识别为ES模块，或者服务器的响应头配置不正确，导致浏览器无法解析ES模块语法。

解决方法 #

1. 修正外部服务器的响应头配置 #

让托管order.js的服务器，将该文件的Content-Type响应头设置为application/javascript或module，这样浏览器会自动以ES模块的方式加载它。

2. 改用动态脚本注入加载模块 #

直接用import()加载外部URL受限于模块类型和CORS配置，可通过创建type="module"的脚本标签来加载，同时需要调整外部模块暴露全局变量：

步骤1：修改外部的order.js，将导出的函数挂载到全局

// www.xyz.com/order.js
export function order() {
  const create = () => {
    console.log('Order created');
  };
  return { create };
}
// 新增：将order函数暴露到window全局对象
window.order = order;

步骤2：在React TypeScript中加载模块

async function loadExternalModule(moduleUrl: string): Promise<() => { create: () => void }> {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.type = 'module';
    script.src = moduleUrl;
    script.crossOrigin = 'anonymous'; // 处理CORS，根据服务器配置调整

    script.onload = () => {
      // 从全局获取暴露的模块
      resolve(window.order);
    };

    script.onerror = (error) => {
      reject(new Error(`加载模块失败: ${error.message}`));
      // 加载失败后移除脚本标签
      document.head.removeChild(script);
    };

    document.head.appendChild(script);
  });
}

// 使用示例
if (selectedModule === 'order') {
  try {
    const orderModule = await loadExternalModule('https://www.xyz.com/order.js');
    orderModule().create(); // 调用order函数后执行create方法
  } catch (err) {
    console.error('加载模块出错:', err);
  }
}

3. 处理CORS问题 #

确保托管order.js的服务器配置了Access-Control-Allow-Origin响应头，允许你的React应用域名访问。如果服务器没有配置，脚本加载会被浏览器的同源策略阻止。

4. 确保使用完整的URL #

动态加载时，要使用带协议的完整URL（比如https://www.xyz.com/order.js），避免浏览器解析为相对路径导致加载错误。

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