无服务器file URI环境下React动态导入解析JSON文件的问题

场景可行性 #

这个需求完全可行，但需要避开CRA/Webpack的模块加载机制，改用浏览器原生的本地文件读取能力，同时处理浏览器的安全限制。

核心误解分析 #

你遇到的问题源于对CRA中动态import()的误用：

• 开发环境中，webpack-dev-server会将/public/路径映射到项目根目录的public文件夹，动态import请求会被dev server直接转发到对应文件，因此能正常工作。
• 生产构建时，动态import()是Webpack的模块加载语法，Webpack会尝试解析路径并将文件打包进chunk，但你的JSON文件是动态增减的、未被静态引用的，Webpack无法提前识别这些文件，因此抛出Module not found错误。此外，生产环境下public目录的文件会被复制到build根目录，路径变为./my-jsons/，但Webpack仍会将其视为模块路径而非本地文件路径。

具体解决步骤 #

1. 保留文件目录结构 #

确保你的JSON文件放在public/my-jsons/下，CRA默认会将public目录下的所有文件原样复制到build目录的根目录，因此构建后build/my-jsons/会保留所有用户配置的JSON文件。

2. 替换动态import为原生文件读取方式 #

放弃Webpack的动态import()，改用XMLHttpRequest（XHR）读取本地文件（fetch在file://环境下受浏览器安全策略限制，XHR兼容性更好）。

示例代码（React组件）：

import { useState } from 'react';

function JsonViewer() {
  const [jsonContent, setJsonContent] = useState(null);
  const [error, setError] = useState(null);

  const loadJsonFile = async (e, fileName) => {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    setError(null);
    
    try {
      const xhr = new XMLHttpRequest();
      // 使用相对路径，对应build/my-jsons/下的文件
      xhr.open('GET', `./my-jsons/${fileName}.json`, true);
      
      xhr.onload = () => {
        // file://环境下，成功读取时status为0
        if (xhr.status === 0 || xhr.status === 200) {
          const parsedJson = JSON.parse(xhr.responseText);
          setJsonContent(parsedJson);
        } else {
          throw new Error(`加载失败，状态码：${xhr.status}`);
        }
      };
      
      xhr.onerror = () => {
        throw new Error('网络请求错误（检查浏览器文件访问权限）');
      };
      
      xhr.send();
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    <div>
      <a href="./my-jsons/test.json" onClick={(e) => loadJsonFile(e, 'test')}>加载Test JSON</a>
      <a href="./my-jsons/config.json" onClick={(e) => loadJsonFile(e, 'config')}>加载Config JSON</a>
      
      {error && <p style={{color: 'red'}}>{error}</p>}
      
      {jsonContent && (
        <div>
          <h3>JSON内容：</h3>
          <pre>{JSON.stringify(jsonContent, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

export default JsonViewer;

3. 处理浏览器安全限制 #

现代浏览器默认禁止从file:// URL读取其他本地文件，需要用户调整浏览器设置：

• Chrome/Edge：启动浏览器时添加参数 --allow-file-access-from-files
• Firefox：在地址栏输入about:config，将security.fileuri.strict_origin_policy设置为false

这是浏览器的安全策略，无法通过代码绕过，需告知用户配置方式。

理想方案实现 #

上述代码已实现你想要的效果：用户点击指向JSON文件的<a>标签时，阻止默认跳转，实时读取并解析JSON内容，最后通过React组件渲染到UI中。

内容的提问来源于stack exchange，提问作者Luis G M.