【node:19212】 解决 Node.js 报错 “将文件视为 CommonJS 模块“

【node:19212】 解决 Node.js 报错 "将文件视为 CommonJS 模块"

当在 Node.js 中运行 JavaScript 文件时,可能会遇到类似以下的报错信息:

复制代码
(node:19212) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
D:\my_dev\frontend\svelte\demo1\svelte-demo\src\test\test.js:1
import handleHashChange from "./test-module/test1";
^^^^^^

SyntaxError: Cannot use import statement outside a module

这个报错表明 Node.js 在处理 JavaScript 文件时遇到了 import 语句,但未将文件视为 ES 模块。下面是解决这个问题的几种方法。

方式一

1. 设置 "type": "module":

在项目的 package.json 文件中添加 "type": "module" 字段,告诉 Node.js 该项目使用 ES 模块。

json 复制代码
{
  "type": "module",
  ...
}

这样做后,Node.js 将会将所有 .js 文件视为 ES 模块。

2. 使用 .mjs 扩展名:

将文件的扩展名从 .js 改为 .mjs,这样 Node.js 将会将文件视为 ES 模块。

bash 复制代码
mv ./src/test/test.js ./src/test/test.mjs

这样做后,Node.js 将会自动将文件视为 ES 模块。

3. 使用 --experimental-modules 标志:

在运行 Node.js 时,使用 --experimental-modules 标志启用 ES 模块支持。

bash 复制代码
node --experimental-modules ./src/test/test.js

这样做后,Node.js 将会将文件视为 ES 模块。

方式二

1. 在顶部添加 require 语句:

在文件顶部添加一个 require 语句,将 import 语句转换为 CommonJS 的 require 语法。

javascript 复制代码
const handleHashChange = require("./test-module/test1").default;

这样做后,Node.js 将会将文件视为 CommonJS 模块。

2. 使用 Babel 转换:

使用 Babel 将 ES 模块转换为 CommonJS 模块,然后在 Node.js 中运行。

  1. 安装 Babel 相关的依赖:
bash 复制代码
npm install @babel/core @babel/cli @babel/preset-env --save-dev
  1. 创建 .babelrc 文件来配置 Babel:
json 复制代码
{
  "presets": ["@babel/preset-env"]
}
  1. 使用 Babel 转换代码:
bash 复制代码
npx babel ./src/test/test.js --out-file ./dist/test.js
  1. 在 Node.js 中运行转换后的代码:
bash 复制代码
node ./dist/test.js

以上是两种常见的解决方案,你可以根据自己的需求选择其中一种。每种方法都有其优缺点,你可以根据项目的具体情况选择最适合的方法。

相关推荐
Misnice4 小时前
Webpack、Vite、Rsbuild区别
前端·webpack·node.js
毕设源码-朱学姐1 天前
【开题答辩全过程】以 基于Node.js的书籍分享平台设计与实现为例,包含答辩的问题和答案
node.js
前端 贾公子1 天前
Node.js 如何处理 ES6 模块
前端·node.js·es6
周杰伦的稻香1 天前
Hexo搭建教程
java·node.js
毕设源码-钟学长1 天前
【开题答辩全过程】以 基于node.js vue的点餐系统的设计与实现为例,包含答辩的问题和答案
前端·vue.js·node.js
朝朝暮暮an2 天前
Day 2|Node.js 运行机制、模块系统与异步初探
node.js
aidou13142 天前
Visual Studio Code(VS Code)安装步骤
vscode·npm·node.js·环境变量
止观止2 天前
告别 require!TypeScript 5.9 与 Node.js 20+ 的 ESM 互操作指南
javascript·typescript·node.js
一只专注api接口开发的技术猿2 天前
淘宝商品详情API的流量控制与熔断机制:保障系统稳定性的后端设计
大数据·数据结构·数据库·架构·node.js
天远数科2 天前
天远车辆过户查询API集成指南:Node.js 全栈视角下的二手车数据挖掘
大数据·数据挖掘·node.js·vim