VSCode中ES Modules与CommonJS混用时的Node环境兼容配置

雨强姑娘_6467

雨强姑娘_6467

2026-07-03

886人浏览

原创

err_require_esm 错误是因 commonjs 的 require() 被 node 硬性禁止加载 esm 模块(如 .mjs 或 type: "module" 下的 .js),解决核心是匹配执行环境与模块类型:改后缀为 .mjs、配 package.json 的 "type": "module" 并统一改 import、或在 cjs 中用动态 import() 加载 esm。

vscode中es modules与commonjs混用时的node环境兼容配置

VSCode点“运行”就报 ERR_REQUIRE_ESM 怎么办

这是 VSCode 默认用 node script.js 执行文件,而该脚本或它 require() 的某个模块是 ESM(比如后缀为 .mjs,或依赖的包如 execa@8+、glob@10+ 已发布纯 ESM 版本),Node 直接拒绝加载——不是语法错,是模块加载器硬拦截。

解决思路不是“统一改成 ESM”,而是让执行环境匹配模块类型:

  • 给文件改后缀:script.js → script.mjs,VSCode 的 Code Runner 插件会自动识别并加 --experimental-modules(Node v12+)或直接按 ESM 执行(v14+)
  • 在 package.json 中加 "type": "module",但必须同步把所有 require() 改成 import,且不能再用 __dirname、require.resolve 等 CJS 特有变量
  • 不改项目结构?那就别让 VSCode 直接跑 node xxx.js:右键 → “Open in Integrated Terminal”,手动执行 node --loader ts-node/esm xxx.ts 或 node --input-type=module -e "import('./main.mjs')"

CommonJS 文件里怎么安全 import 一个 .mjs 模块

require('./utils.mjs') 必炸,但 Node 自 v12.17+ 就支持在 CJS 文件中用动态 import() 加载 ESM 模块——这是唯一被官方认可的跨规范调用方式。

注意三点:

  • import() 返回 Promise,必须 await 或 .then();不能写在顶层同步逻辑里(比如 CLI 参数解析需立即执行时)
  • 导入结果是命名空间对象:const { foo } = await import('./utils.mjs'),不是默认导出直接解构
  • 如果 ESM 模块用了 export default,得写成 const { default: foo } = await import('./utils.mjs'),或者用 const mod = await import('./utils.mjs'); const foo = mod.default

createRequire 能绕过 ERR_REQUIRE_ESM 吗

不能。它只解决“CJS 环境里想加载另一个 CJS 模块但 package.json 设了 "type": "module"”的问题,不是用来加载 .mjs 的。

Comprehensive Three.js 3D graphics reference
Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考,涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

典型误用场景:有人以为写了 const require = createRequire(import.meta.url) 就能 require('./utils.mjs') —— 实际仍会报错。

它的正确用途是:

  • 在 ESM 文件(如 .mjs)里加载传统 CJS 模块:const config = require('./config.cjs')
  • 路径必须明确带后缀(.cjs 或 .js),且目标文件不能含 export/import 语句
  • 它生成的 require 仍受 Node 模块系统规则约束:不支持 .mjs、不支持 JSON 自动解析(需 require('fs').readFileSync)

为什么改了 package.json 的 "type" 还是报错

因为 "type": "module" 只影响 .js 文件,不影响 .cjs 和 .mjs——它们各自按后缀强制解释。但很多人忽略了一个关键细节:子依赖的模块类型由它自己的 package.json 决定,不受你项目 "type" 控制。

常见陷阱:

  • 你的 index.js 是 ESM(因 "type": "module"),但它 import 的第三方包(如 lodash-es)内部又 require() 了某个 CJS 子模块,而那个子模块又试图 import 回来——形成混合加载链,Node 会卡在某一层报错
  • VSCode 的调试器(launch.json)没配 runtimeArgs,比如没加 --experimental-specifier-resolution=node,导致解析 import 'pkg' 时找不到入口
  • 某些插件(如 ESLint、Prettier)读取配置文件时仍按旧模式解析,报 Unexpected token 'export',这不是运行时错误,得单独配 parserOptions.project 或关掉相关检查

最易被忽略的是:模块边界从来不在文件名,而在加载器链路。同一个 .js 文件,在 type: module 下是 ESM,在 type: commonjs 下是 CJS,而它引入的 .mjs 始终只能用 import(),.cjs 始终只能用 require() 或 createRequire。混用不是靠“兼容开关”,而是靠主动控制加载方式。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

vscode node js

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

3916

8

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.07.28

1235

5

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1598

5

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

2023.08.17

9383

11

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

880

4

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

2344

5

Js中concat和push的区别
Js中concat和push的区别

Js中concat和push的区别:1、concat用于将两个或多个数组合并成一个新数组,并返回这个新数组,而push用于向数组的末尾添加一个或多个元素,并返回修改后的数组的新长度;2、concat不会修改原始数组,是创建新的数组,而push会修改原数组,将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.14

1469

5

js截取字符串的方法介绍
js截取字符串的方法介绍

JavaScript字符串截取方法,包括substring、slice、substr、charAt和split方法。这些方法可以根据具体需求,灵活地截取字符串的不同部分。在实际开发中,根据具体情况选择合适的方法进行字符串截取,能够提高代码的效率和可读性 。

2023.09.21

3949

3

js生成随机数方法
js生成随机数方法

JavaScript生成随机数的方法,包括使用Math.random()方法生成指定范围内的随机整数、生成随机字符串和生成随机颜色。根据具体需求,可以选择适合的方法来生成随机数,以实现各种功能 。

2023.09.25

2215

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程