React应用中导入JSONC文件后无法访问对象属性的解决问询

嘿，这个问题我之前也碰到过！核心原因是Webpack（包括Create React App默认的配置）只支持解析标准JSON，不识别JSONC里的注释——所以你导入的JSONC文件并没有被解析成JavaScript对象，而是可能变成了原始字符串或者解析失败的内容，自然没法访问.title这类属性啦。

下面给你两个靠谱的解决方案，按需选择：

方案一：用jsonc-loader让Webpack直接解析JSONC #

这是最省心的方式，让Webpack在导入时自动处理JSONC的注释，把文件解析成对象。

步骤1：安装依赖 #

在项目根目录运行：

npm install jsonc-loader --save-dev
# 或者用yarn
yarn add jsonc-loader -D

步骤2：配置Webpack（分两种场景） #

如果用Create React App且不想eject：

我们可以用craco来覆盖默认配置，不用 eject：

1. 先安装craco：

npm install @craco/craco --save-dev

2. 在项目根目录创建craco.config.js，添加以下配置：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 添加处理.jsonc文件的规则
      webpackConfig.module.rules.push({
        test: /\.jsonc$/,
        use: ['jsonc-loader'],
        type: 'javascript/auto' // 避免Webpack默认的JSON处理逻辑干扰
      });
      return webpackConfig;
    },
  },
};

3. 修改package.json里的scripts，把react-scripts替换成craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

如果是自定义Webpack配置（已经eject或自己搭建的项目）：

直接在webpack.config.js的module.rules里添加规则：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...已有的其他规则
      {
        test: /\.jsonc$/,
        use: 'jsonc-loader',
        type: 'javascript/auto'
      }
    ]
  }
};

步骤3：重启项目 #

配置完后重启开发服务器，现在你的importAll函数就能正常把JSONC解析成对象了，遍历的时候访问.title和.Input就没问题啦！

方案二：手动解析JSONC字符串 #

如果不想配置Webpack，也可以手动把JSONC文件当作文本导入，再用解析库转成对象：

步骤1：安装依赖 #

需要两个包：raw-loader用来导入原始文本，jsonc-parser用来解析JSONC：

npm install raw-loader jsonc-parser --save-dev

步骤2：修改导入逻辑 #

更新你的importAll函数，先导入原始文本，再解析成对象：

import { parse } from 'jsonc-parser';

function importAll(r) { 
  let files = {}; 
  r.keys().map(item => { 
    // 用raw-loader加载JSONC的原始文本
    const rawJsonc = r(item).default;
    // 解析JSONC成JavaScript对象
    const parsedData = parse(rawJsonc);
    files[item.replace('./', '')] = parsedData; 
  }); 
  return files; 
} 

// 修改require.context，指定用raw-loader加载.jsonc文件
const files = importAll(require.context('!!raw-loader!./Service-Requests/', true, /\.jsonc$/));

这里的!!是告诉Webpack跳过其他loader，直接用raw-loader处理，确保我们拿到的是原始字符串。

小提示 #

不管用哪种方案，都要确保你的JSONC文件格式是有效的：

• 单行注释用//
• 多行注释用/* ... */
• 注释不要破坏JSON的结构（比如不要放在属性名或值中间）

现在你再运行代码，console.log(files)应该能看到每个文件对应的都是解析好的对象，遍历访问属性就完全正常啦！

内容的提问来源于stack exchange，提问作者Nadia Hansen