导入sweetalert报Cannot use import statement outside a module错误如何解决

你当前的矛盾点来自两个层面：

• 运行层：你在TS中使用了ES模块的import语法，但编译后的JS文件引入到HTML时没有声明为模块，浏览器无法识别import语句所以报错。
• 类型层：你已经通过script标签全局引入了sweetalert，运行时全局存在swal变量，但官方类型声明是为模块引入场景设计的，直接用全局swal时TS无法匹配到正确的可调用类型，所以报2349错误。纯JS文件没有类型检查逻辑，所以可以直接使用全局swal。

方案1：无需改造为ES模块（最适配当前项目结构） #

直接复用现有全局引入的sweetalert，不需要import语句，只需要补全全局类型声明即可：

• 第一步：删除TS文件中的import swal from 'sweetalert'代码
• 第二步：在项目根目录新建类型声明文件global.d.ts，写入以下内容：

declare global {
  // 全局swal的类型绑定为sweetalert默认导出的可调用实例
  const swal: typeof import('sweetalert').default;
}
// 该行必须保留，让TS识别该文件为模块类型，全局声明才会生效
export {}

• 第三步：在tsconfig.json的include数组中加入该声明文件路径：

{
  "include": [
    "./global.d.ts",
    // 保留你原有其他include配置
  ]
}

配置完成后重新编译即可，既不会有运行时import错误，也不会有TS类型报错。

方案2：改造为ES模块 #

如果你愿意将现有TS代码调整为ES模块模式，可以直接解决import语法报错：

• 在index.html中引入你编译后的JS文件的script标签上添加type="module"属性：

<script type="module" src="你的编译后JS文件路径"></script>

该配置会让浏览器将对应JS识别为ES模块，支持import语法，原有import代码无需改动即可正常运行。

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