如何在ProductDetails.js中导入JSON文件？导入db.json报错求助

先解决ProductChart.js的导入报错 #

报错提示Module not found: Can't resolve '../db.json'，本质是文件路径错误，按以下步骤排查：

• 确认db.json的实际位置：
  你的ProductChart.js在C:\Users\SH20330370\react-demo\src\Product目录，../代表回到上一级（即src目录），如果db.json不在src根目录，这个路径就不对。
  举几个常见场景的正确路径：
  • 若db.json和ProductChart.js同目录（src/Product/db.json），用：import db from './db.json';
  • 若db.json在src/data/db.json，用：import db from '../data/db.json';
  • 若db.json在项目根目录（react-demo/db.json），用：import db from '../../db.json';
• 检查文件名拼写：确认文件名是db.json，注意大小写（部分webpack配置会严格区分，即便Windows本地不区分，也要留意）。

在ProductDetails.js中导入JSON文件的正确方式 #

核心是匹配相对路径，根据ProductDetails.js的位置调整：

• 假设ProductDetails.js在src/Product目录（和ProductChart.js同目录）：
  • 若db.json在src根目录：import db from '../db.json';
  • 若db.json在同目录：import db from './db.json';
• 假设ProductDetails.js在src/components/ProductDetails.js：
  • 若db.json在src根目录：import db from '../db.json';

补充：用create-react-app搭建的React项目，默认支持直接导入JSON文件，无需额外配置webpack；如果是自定义webpack项目，需确保配置了json-loader（多数现代webpack版本已默认支持）。

内容的提问来源于stack exchange，提问作者fayaz shaik