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

编辑：rootadmin

详细分析解决Uncaught SyntaxError: Cannot use import statement outside a module (at ...)的错误文章目录1. 复现错误2. 分析错误3. 解决错误1. 复现错误

推荐整理分享详细分析解决Uncaught SyntaxError: Cannot use import statement outside a module (at ...)的错误(unc方式)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:unpreccdented,unc方式,unc错误,unallocted,unallocted,unc方式,unc错误,unp解决方案应用场景,内容如对您有帮助，希望把文章链接给更多的朋友！

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

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

2. 分析错误

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

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

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

于是，查看我的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}

如上代码可知，我已使用export导出模块了，那问题出现在哪里呢？

于是，查阅相关资料可知：对于es6的语法，我们使用import导入模块的语法时，需要将html中

本文链接地址:https://www.jiuchutong.com/zhishi/283275.html 转载请保留说明！

上一篇：fssm32.exe是什么进程有什么作用 fssm32进程查询

下一篇：win10电源高性能怎么设置(win10电源高性能被删了)