解决node环境下SyntaxError: Cannot use import statement outside a module的问题

H.ZWei

已于 2022-11-02 21:28:08 修改

阅读量4.1k

点赞数

分类专栏：前端文章标签： javascript node.js import

于 2022-11-02 21:26:36 首次发布

本文链接：https://blog.csdn.net/hzw2017/article/details/127659161

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

问题

最近在写JavaScript时，写了一个工具类，多个地方要用到，通过模块化导入，在node环境运行会报错：

SyntaxError: Cannot use import statement outside a module

在这里插入图片描述

解决方案

在警告信息Warning的提示下，需要在 package.json设置"type": "module"，通过执行命令npm init -y会自动生成 package.json文件，如下：

{
  "name": "web",
  "version": "0.0.1",
  "keywords": [],
  "license": "ISC",
  "author": "",
  "scripts": {
    "build": "parcel build index.html",
    "dev": "parcel index.html --open",
    "start": "npm run build && npm run dev",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.4"
  },
  "main": "index.js",
  // 重点
  "type": "module"
}

生成文件后，并没有达到效果，还会报错：

在这里插入图片描述

意思是说export模块需要声明default，如单独导出一个变量：

export const a = 2

需要改成如下：

const a = 2
export default a

另外improt导入模块时，需要设置全路径，包括文件后缀也要加上，不然会报ERR_MODULE_NOT_FOUND错：

在这里插入图片描述

// 正确
import a from "./index.js"

// 错误
import a from "./index"

原因

CommonJS作为Node.js 的规范，一直沿用至今，现在很多类库还在用CommonJS ，而ES6的import/export出现相对晚很多，在Node13以上环境为了兼容ES6的特性，就需要创建package.json文件指明type类型为module。

参考

https://cnodejs.org/topic/5e4be9ad1225c9423dcda5b9
https://www.zhihu.com/question/56820346
https://bobbyhadz.com/blog/javascript-requested-module-not-provide-export-named-default