引入json文件时ts报错：Cannot find module ‘./load2.json‘. Consider using ‘--resolveJsonModule‘ to import ..._ts项目中json的导入即使文件位置正确仍提示找不到
目录
引入json文件时ts报错：Cannot find module \'./load2.json\'. Consider using \'--resolveJsonModule\' to import ...
一、场景说明
二、解决方法
1、启用 resolveJsonModule 选项
2、显式声明 JSON 文件类型
3、使用 require 导入 JSON 文件
三、推荐方法
四、结语
作者：watermelo37
CSDN全栈领域优质创作者、万粉博主、华为云云享专家、阿里云专家博主、腾讯云“创作之星”特邀作者、支付宝合作作者，全平台博客昵称watermelo37。
一个假装是giser的coder，做不只专注于业务逻辑的前端工程师，Java、Docker、Python、LLM均有涉猎。
---------------------------------------------------------------------
温柔地对待温柔的人，包容的三观就是最大的温柔。
---------------------------------------------------------------------
引入json文件时ts报错：Cannot find module \'./load2.json\'. Consider using \'--resolveJsonModule\' to import ...
一、场景说明
创建新项目开发的时候遇到一个问题，出现在引入json文件的时候，报错内容为：
import animationLoading from \"./load2.json\";报错： Cannot find module \'./load2.json\'. Consider using \'--resolveJsonModule\' to import module with \'.json\' extension.
这个错误是因为 TypeScript 默认情况下不支持直接导入 .json 文件。当你尝试导入一个 JSON 文件时，TypeScript 会报错，因为它不知道如何处理这种扩展名的模块。
二、解决方法
1、启用 resolveJsonModule 选项
在 tsconfig.json 文件中启用 resolveJsonModule 选项，这样 TypeScript 就可以正确解析 .json 文件。
-
打开 tsconfig.json 文件。
-
在 compilerOptions 中添加或确保有以下配置：
{// 解决ts无法识别json文件的问题 \"compilerOptions\": { \"resolveJsonModule\": true }}启用这个选项后，TypeScript 会允许你直接导入 .json 文件。
2、显式声明 JSON 文件类型
如果你不想启用 resolveJsonModule，可以通过显式声明 JSON 文件的类型来解决这个问题。在你的项目中创建一个类型声明文件（如 types.d.ts），并添加以下内容：
declare module \"*.json\" { const value: any; export default value;}这样，TypeScript 就会知道 .json 文件是一个模块，并且可以正确解析它。
3、使用 require 导入 JSON 文件
如果你不想修改 tsconfig.json 或添加类型声明，可以使用 require 来导入 JSON 文件。这种方式不会受到 TypeScript 的限制：
const animationLoading = require(\"./load2.json\");三、推荐方法
推荐使用方法 1，启用 resolveJsonModule 选项。这是最简单且最直接的解决方案，它允许你直接使用 import 语法导入 JSON 文件，同时保持代码的清晰和一致性。
启用 resolveJsonModule 后，其他的配置代码和引入代码就可以保持不变：
import animationLoading from \"./load2.json\";四、结语
新项目引入Json文件ts报错是配置问题，三种方案任选其一即可。
-
启用 resolveJsonModule：最推荐的方式，简单且直接。
-
显式声明类型：适用于不想修改 tsconfig.json 的情况。
-
使用 require：快速解决，但牺牲了 ES6 模块的语法。
只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
其他热门文章，请关注：
极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图
你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解
DeepSeek：全栈开发者视角下的AI革命者
通过array.filter()实现数组的数据筛选、数据清洗和链式调用
Web Worker：让前端飞起来的隐形引擎
测评：这B班上的值不值？在不同城市过上同等生活水平到底需要多少钱？
通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能
TreeSize：免费的磁盘清理与管理神器，解决C盘爆满的燃眉之急
通过MongoDB Atlas 实现语义搜索与 RAG——迈向AI的搜索机制
深入理解 JavaScript 中的 Array.find() 方法：原理、性能优势与实用案例详解
前端实战：基于Vue3与免费满血版DeepSeek实现无限滚动+懒加载+瀑布流模块及优化策略
el-table实现动态数据的实时排序，一篇文章讲清楚elementui的表格排序功能
JavaScript双问号操作符（??）详解，解决使用 || 时因类型转换带来的问题
内存泄漏——海量数据背后隐藏的项目生产环境崩溃风险！如何避免内存泄漏
【前端实战】如何让用户回到上次阅读的位置？
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver
JavaScript中通过array.map(）实现数据转换、创建派生数组、异步数据流处理、DOM操作等
高效工作流：用Mermaid绘制你的专属流程图；如何在Vue3中导入mermaid绘制流程图
