如何在Single-SPA + ReactJS项目中渲染本地JSON文件内容

你遇到的是调用map时报Cannot read properties of undefined的错误，核心原因是Single-SPA的模块加载规则和纯React项目不同：
纯React项目（如CRA搭建的项目）的构建工具默认会将import引入的JSON文件直接解析为对应JS对象，你可以直接访问menuJson.menu；而Single-SPA子应用通常会配置SystemJS作为模块加载器，默认不支持JSON格式的模块导入，导致你拿到的menuJson不是预期的JSON结构，menuJson.menu为undefined，调用map方法就会报错。

下面提供三种可落地的解决方式，按需选择即可：

方案1：兼容导入结构（快速修复） #

先打印menuJson确认实际结构，大概率导入的JSON内容会挂在default属性下，直接兼容取值同时加兜底空数组避免报错，同时补全React列表渲染要求的key属性：

import menuJson from './menu.json';
    
const MenuItems = () => {
  // 兼容两种可能的导入结构，加兜底空数组避免map报错
  const menuList = (menuJson.menu || menuJson.default?.menu || []).map((data) => {
    return <li key={data.name}>{data.name}</li>;
  });
    
  return (
    <>
      <ul>{menuList}</ul>
    </>
  );
};
    
export default MenuItems;

方案2：配置模块加载器支持JSON导入 #

如果你希望保持import的使用方式，可以修改项目配置适配Single-SPA的加载规则：

• 如果使用webpack构建，确保webpack配置中开启了JSON解析支持（webpack5已内置，不需要额外安装json-loader），同时确认output.libraryTarget的配置不会修改JSON模块的导出结构
• 如果使用SystemJS作为运行时加载器，安装systemjs-plugin-json插件并在入口处引入，即可支持直接import JSON文件

方案3：改用fetch方式加载JSON（兼容性最好） #

将menu.json文件放到子应用的静态资源目录（一般是public文件夹），通过fetch请求异步加载，完全规避模块导入的兼容问题：

import { useState, useEffect } from 'react';
    
const MenuItems = () => {
  const [menuList, setMenuList] = useState([]);

  useEffect(() => {
    // 路径根据你部署JSON的实际路径调整
    fetch('/menu.json')
      .then(res => res.json())
      .then(jsonData => {
        setMenuList(jsonData.menu || []);
      })
      .catch(err => {
        console.error('菜单配置加载失败', err);
      })
  }, []);
    
  const renderMenu = menuList.map((data) => {
    return <li key={data.name}>{data.name}</li>;
  });
    
  return (
    <>
      <ul>{renderMenu}</ul>
    </>
  );
};
    
export default MenuItems;

内容的提问来源于stack exchange，提问作者Clauber Stipkovic