esmodule 中导入 json 文件必须显式声明 assert { type: "json" },node.js v17+ 默认支持,v14.13–v16 需启用 --experimental-json-modules;浏览器原生 esm 尚不支持,应改用 fetch。

在 JavaScript 的 ESModule(ESM)中,直接导入 JSON 文件需要显式声明 assert { type: "json" } 断言,否则会报错(如 ERR_UNSUPPORTED_ESM_URL_SCHEME 或解析失败)。这是 Node.js 从 v14.13.0+(需启用 --experimental-json-modules)和 v17.0.0+(默认支持)开始引入的规范行为,也是现代打包工具(如 Vite、Webpack 5+)遵循的标准。
Node.js 环境:确保版本与启用方式
Node.js v17 及以上版本默认支持 JSON 导入断言;v14.13–v16 需启用实验性标志:
- 运行时加参数:
node --experimental-json-modules index.mjs - 或在
package.json中声明:"type": "module"(确保使用 .mjs 后缀或该配置) - 注意:仅当模块系统为 ESM 时生效;CommonJS(
require())无需断言,但也不支持assert
导入语法:必须带 assert 声明
JSON 模块不是“自动识别”的类型,必须在 import 语句中显式写明断言:
你接手一个需求时,是不是经常这样:"改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续";这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境(JDK、Spring Boot、ORM、数据库、前端框架),记在
import data from './config.json' assert { type: 'json' };
-
不能省略
assert,即使文件后缀是 .json -
type值必须是字符串'json'(大小写敏感) - 支持命名导入(需配合默认导出):
import { default as config } from './config.json' assert { type: 'json' }; - 不支持解构导入(如
import { version } from './pkg.json' assert {...}),因为 JSON 是默认导出一个对象
构建工具适配要点
Vite、Webpack 5+、esbuild 等默认支持该语法,但要注意:
- Vite:开箱即用,无需额外配置(v2.9+)
-
Webpack 5:需在
module.rules中启用parser.parse对 JSON 的 ESM 支持,通常默认已配好;若用type: "json"导入,建议同时开启resolve.extensions包含'.json' -
TypeScript:需在
tsconfig.json中设置"resolveJsonModule": true和"moduleResolution": "node16"或"bundler",TS 才能正确识别类型和断言(注意:TS 编译本身不处理assert,由运行时或打包器处理)
常见错误与绕过方式
如果遇到 Assertion failed: Expected type "json" 或语法报错:
- 确认文件路径正确,且 JSON 格式合法(无注释、尾逗号等)
- 检查是否误在 CommonJS 文件(.cjs 或未设
"type": "module"的 .js)中使用该语法 —— 不支持 - 浏览器原生 ESM 目前不支持 JSON 断言(Chrome/Firefox 尚未实现),生产环境应改用
fetch('./config.json').then(r => r.json()) - 临时兼容方案:用动态
import()(仍需断言):const { default: data } = await import('./data.json', { assert: { type: 'json' } });
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










