如何解决JavaScript中使用export和import时出现的两个报错问题？

本文共计1054个文字，预计阅读时间需要5分钟。

目录：错误处理前言：前端小白遇到的常见问题报错：Uncaught SyntaxError: Cannot use import statement outside a module报错：Uncaught SyntaxError: The requested module /js/ui.js does not provide an export named default总结：作为前端小白，了解常见错误及其解决方法是必要的。最近遇到的问题包括模块导入错误和缺少默认导出。

前言：作为一名前端新手，面对各种技术问题可能感到困惑。以下是几个常见错误及其解析。

目录：

1.模块导入错误

2.缺少默认导出

3.解决方法

1. 模块导入错误

错误信息：Uncaught SyntaxError: Cannot use import statement outside a module解析：在非模块环境中使用了import语句，这通常发生在非ES6模块的环境中。确保你在一个支持模块化的环境中（如使用Webpack或Babel转译器）使用import语句。

2. 缺少默认导出错误信息：Uncaught SyntaxError: The requested module /js/ui.js does not provide an export named default解析：尝试导入一个模块时，该模块没有提供名为default的导出。确保模块正确设置了default导出，或者使用正确的键来导入需要的部分。

3. 解决方法- 确保你的项目配置了模块化支持（如Webpack、Babel）。- 检查导入的模块是否正确设置了default导出。- 检查导入的模块路径是否正确。

总结：作为前端小白，面对这些错误时，可以通过查阅文档、搜索解决方案或请教他人来快速解决。不断学习和实践是提高前端技能的关键。

目录

• 前言
• 报错：Uncaught SyntaxError: Cannot use import statement outside a module
• 报错：Uncaught SyntaxError: The requested module ‘…/js/ui.js’ does not provide an export named ‘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在引入时，不能加{}，否则会报错。

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报错内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！