本文记录并解决了前端开发中JavaScript使用export和import时遇到的两个典型报错。首先针对“Cannot use import statement outside a module”错误，通过为script标签添加type="module"属性解决；其次针对“does not provide an export named 'default'”错误，分析了默认导出与具名导出的引入区别，指出使用export default时不应添加大括号，而具名导出需使用大括号引入。
前言
作为前端初学者，近期在学习JavaScript的export和import语法时，遇到了两个报错，特此记录解决过程。
报错：Uncaught SyntaxError: Cannot use import statement outside a module
该错误提示无法在模块（module）外部使用import语句。经查阅资料得知，script标签默认以传统JavaScript模式运行，直接书写ES6语法会导致解析错误。解决方法是在script标签中显式声明type="module"，具体配置如下：
<script type="module">
import Rotation from '../js/ui.js'
Rotation();
</script>
添加该属性后，上述报错即可消除。
报错：Uncaught SyntaxError: The requested module ‘…/js/ui.js’ does not provide an export named ‘default’
在修复第一个报错后，控制台紧接着抛出了第二个错误：
错误信息表明目标JS文件中不存在default导出。检查该JS文件，其导出代码结构如下：
function Rotation() {
let lbt = document.querySelectorAll('.zh-lbt');
for (let i = 0; i < lbt.length; i++) {
let lbtNum = Number(lbt[i].getAttribute('num'))||1
console.log(lbtNum);
}
}
export {Rotation};
从语法角度看，export default与export仅暴露方式不同，不应引发语法错误。因此推测问题可能出在引入端，尝试将引入代码修改为：
<script type="module">
import Rotation from '../js/ui.js'
Rotation();
</script>
即在大括号{}内指定引入名称，修改后发现控制台不再报错，且功能正常运行。
<script type="module">
import {Rotation} from '../js/ui.js'
Rotation();
</script>
此时界面正常显示结果。
起初认为原因是export语法可暴露多个目标，故引入时需通过{}以对象形式解构；而export default仅暴露单一目标，无需大括号。然而这一理解并不准确。
实际上，当使用export default时，引入语句中不能添加大括号{}，否则会导致报错。
export default{
Rotation:function () {
let lbt = document.querySelectorAll('.zh-lbt');
for (let i = 0; i < lbt.length; i++) {
let lbtNum = Number(lbt[i].getAttribute('num'))||1
console.log(lbtNum);
}
}
}
<script type="module">
import {Rotation} from '../js/ui.js'
Rotation.Rotation();
</script>
此时控制台会报错：
同理，只需去掉引入语句中的大括号{}，即可正确打印上述结果。
总结
至此，关于JavaScript使用export和import的两个报错解决文章介绍完毕。更多相关JS使用export和import报错内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！