Outlook插件出现Cannot use import statement outside a module错误求助

问题核心 #

这个错误的本质是浏览器默认将普通<script>标签加载的JS文件当作**非模块（传统脚本）**处理，不支持ES模块的import语法。

解决方案 #

1. 将脚本标记为ES模块 #

修改commands.html中引用launchevent.js的脚本标签，添加type="module"属性，明确告诉浏览器这是一个ES模块：

<script type="module" src="./launchevent.js"></script>

注意：确保脚本的相对路径正确，比如launchevent.js和commands.html在同一目录下就用./，若在子目录需对应调整路径。

2. 适配TypeScript编译输出规范 #

因为你用到了apiService.ts，需要调整tsconfig.json的编译配置，让输出的JS文件符合ES模块要求：

{
  "compilerOptions": {
    "module": "ESNext", // 或ES6/ES2015，确保输出ES模块格式
    "target": "ES6",
    "moduleResolution": "NodeNext",
    "outDir": "./dist", // 输出目录根据你的项目结构调整
    "strict": true
  }
}

编译完成后，apiService.js会包含正确的export语句，之后在launchevent.js中用对应路径导入：

// launchevent.js
import { yourApiFunction } from './dist/apiService.js'; // 路径对应编译后的文件位置

3. 统一项目模块规范（可选） #

如果你的项目整体采用ES模块规范，在package.json中添加"type": "module"，让Node.js和浏览器默认将所有.js文件当作ES模块处理：

{
  "type": "module",
  // 其他现有配置...
}

额外注意 #

• 确保测试的Outlook版本支持ES模块：Outlook 2019及以后版本、Outlook网页版均支持；
• 本地开发时注意脚本路径的正确性，避免因路径错误导致模块加载失败。

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