关于JavaScript使用export和import的两个报错解决

目录
  • 前言
  • 报错：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报错内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Js模块打包exports require import的用法和区别

    1.Commonjs之 exports和require用法 Commonejs规定每个文件是一个模块.将一个JavaScript文件直接通过script标签引入页面中,和封装成CommonJS模块最大的不同在于:前者的顶层作用域是全局作用域,在进行变量及函数声明时会污染全局环境:而后者会形成一个属于模块自身的作用域,所有的变量及函数只有自己能访问,对外是不可见的. 1.1 CommonJS导出之module.exports 导出是一个模块向外暴露自身的唯一方式.在CommonJS中,通过modu

  • import与export在node.js中的使用详解

    import与export在node.js中的使用详解

    简述 import与export是es6中模块化的导入与导出,node.js现阶段不支持,需要通过babel进行编译,使其变成node.js的模块化代码.(关于node.js模块,可参考其他node.js模块化的文章) export 曝露 使用export可以曝露出方法.对象.字符串等等,如下代码 //写法1 export var foo=function(){ console.log(1); } //写法2 var bar ={a:"1",b:2}; export {bar}; //

  • 一文让你彻底搞清楚javascript中的require、import与export

    一文让你彻底搞清楚javascript中的require、import与export

    前言 本文主要给大家介绍了关于javascript中require.import与export的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Javascript不是一种模块化编程语言,在es6以前,它是不支持"类"(class),所以也就没有"模块"(module)了. require时代 Javascript社区做了很多努力,在现

  • ES6使用export和import实现模块化的方法

    在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库,  而像seaJS是基于CMD规范的模块化库,  两者都是为了为了推广前端模块化的工具, 更多有关AMD和CMD的区别, 后面参考给了几个链接: 现在ES6自带了模块化, 也是JS第一次支持module, 在很久以后 ,我们可以直接作用import和export在浏览器中导入和导出各个模块了, 一个js文件代表一个js模块: 现代浏览器对模块(module)支持程度不同, 目前都是

  • ES6模块化的import和export用法方法总结

    ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范.commonjs主要应用于服务器,实现同步加载,如nodejs.AMD规范应用于浏览器,如requirejs,为异步加载.同时还有CMD规范,为同步加载方案如seaJS. ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案. ES6模块主要有两个功能:export和import export用于对外输出本模块(一个文件可以

  • 关于JavaScript使用export和import的两个报错解决

    关于JavaScript使用export和import的两个报错解决

    目录 前言 报错: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,遇到了两个报错,特地记录下来. 报错:Uncau

  • 解决golang在import自己的包报错的问题

    解决golang在import自己的包报错的问题

    原因: 使用git clone项目后,项目根路径是小写英文名称,比如cmdbapi,但是项目里面的import导入自己的相关包时,红色报错 解决: 把项目名称改写成import导入包的名称,即cmdbApi.当然也可以将import导入包改写成小写. 补充:golang之import导入包的一些特殊用法 我们学习了golang之后,晓得关键字import是go的包导入语法,而且我们的第一个程序通常都需要输出hello world. 示例如下: import( "fmt" ) fmt.P

  • python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py

    安装完 anaconda 运行如下代码执行不了 import numpy as np import os,sys #获取当前文件夹,并根据文件名 def path(fileName): p=sys.path[0]+'\\'+fileName return p #读文件 def readFile(fileName): f=open(path(fileName)) str=f.read() f.close() return str #写文件 def writeFile(fileName,str):

  • JavaScript中的单引号和双引号报错的解决方法

    在使用JavaScript显示消息或者传递字符数据的时候,经常会碰到数据中夹杂单引号(')或者双引号("),这种语句往往会造成JavaScript报错.对此一般采用/'或者/"的解决. 例如: Alert("this is test "message"!"); Alert('this is test 'message'!'); 一般会改成以下语句 Alert("this is test /"message/"!&qu

  • Python import自己的模块报错问题及解决

    Python import自己的模块报错问题及解决

    目录 一.同一文件夹下 但是这个时候在PyCharm中显示的是报错 在cmd命令中执行也是成功的 二.处于不同文件夹下面 三.找到本地库的路径,然后将文件拷进去即可 四.手动给python添加搜索路径 在这里说一句Python的包搜索路径 在实际使用python时,我们会将一些公共的东西写到一些基础模块中,供其他模块去调用,这时会去import自定义的一些基础模块,然后来导入. 自己写好了脚本,然后导入,导入的情况分为以下情况: 1. 运行的模块与需要调用自定义基础模块在同一文件夹下 2. 自定

  • vue3+vite项目中按需引入vant报错:Failed to resolve import的解决方案

    目录 问题描述 原因分析 解决方案 总结 问题描述 近日尝试使用vite+vue3+vant开发项目过程中,参考vant官网开发指南->快速上手->引入组件 按照上述配置好后,运行vite环境报错:Failed to resolve import 原因分析 根据报错信息,发现是vant的样式引入路径不对. 程序解析为:项目路径/node_modules/vant/lib/vant/es/组件/style 实际应该是:项目路径/node_modules/vant/lib/ vant/es/组件/

  • 解决python中import文件夹下面py文件报错问题

    解决python中import文件夹下面py文件报错问题

    如下所示: 在需要导入的那个文件夹里面新建一个 __init__.py文件,哪怕这个文件是空的文件也可以. 补充知识:python中import其他目录下的文件出现问题的解决方法 在使用python进行编程的时候,import其他文件路径下的.py文件时报错 Traceback (most recent call last): File "download_and_convert_data.py", line 44, in <module> from .datasets i

  • JavaScript ES6中export、import与export default的用法和区别

    前言 相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法. ES6 import和export的用法 ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范.commonjs主要应用于服务器,实现同步加载,如nodejs.AMD规范应用于浏览器,如requirejs,为异步加载.同时还有CMD规范,为同步加载方案如seaJS. ES6在语言规格的层面上,实现了模块功能,而且

  • JavaScript中require和import的区别详解

    ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口. node编程中最重要的思想之一就是模块,而正是这个思想,让JavaScript的大规模工程成为可能.模块化编程在js界流行,也是基于此,随后在浏览器端,requirejs和seajs之类的工具包也出现了,可以说在对应规范下,require统治了ES6之前的所

  • node.js中使用Export和Import的方法

    Nodejs 6.x版本还没有支持export 和import import与export是es6中模块化的导入与导出,node.js现阶段不支持,需要通过babel进行编译,使其变成node.js的模块化代码.(关于node.js模块,可参考其他node.js模块化的文章) 继续使用exports和require test.js class Point { constructor(x, y) { this.x = x; this.y = y; } add (){ this.x = this.x

随机推荐