详细分析解决Uncaught SyntaxError: Cannot use import statement outside a module (at ...)的错误

news2024/11/18 9:26:08

文章目录

1. 复现错误
2. 分析错误
3. 解决错误

1. 复现错误

今天在学习es6时，启动页面后，却报出如下图错误：

在这里插入图片描述

即Uncaught SyntaxError: Cannot use import statement outside a module (at module.html?_ijt=vfvtohb23jt1tj3r4ad3a0t82v:19:5)。

2. 分析错误

点开错误信息，定位到错误的位置，如下图所示：

在这里插入图片描述

也就是说，在导入包时，出现了这个错误。

于是，查看我的module.html页面，如下代码所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入外部module.ts文件</title>
    <style type="text/css">
    	* {
            margin: 0;
            padding: 0;
        }
        html {
            background-color: #1b6d85;
        }
    </style>
</head>
<body>
</body>
<script type="text/javascript">
    import {btn_onclick, multiple, Person} from "moduleTest/module.js"

    const btnClick = btn_onclick;
    console.log(btnClick)
    console.log("multiple(2, 3)=", multiple(2, 3))
    const person = new Person({"id": 1, name: "super先生"})
    console.log("person=", person)
    console.log("person.getName=", person.getName());
    
</script>
</html>

这个页面没有看出存在什么样的问题，再去排查我的module.js模块文件，检查有误使用export导出模块，如下代码所示：

/**
 * 定义一个button弹框
 */
const btn_onclick = () => window.alert("点击了button按钮，哈哈。。。。");


/**
 * 两数相乘，比如 2 * 3 = 6
 * @param num1 乘数
 * @param num2 被乘数
 * @return 返回两数之积
 */
const multiple = (num1, num2) => num1 * num2;

/**
 * 定义一个Person实体类
 */
class Person {
    constructor(obj) {
        this.id = obj.id
        this.name = obj.name;
    }

    getName() {
        return this.name;
    }
}

//导出
export {btn_onclick, multiple, Person}