React+TypeScript项目Storybook导入对象为undefined并报TypeError

表层报错修复 #

你遇到的Objects are not valid as a React child报错是直接渲染错误对象导致的，先修复这块代码：

// 原catch块写法
catch (error) {
  setApiError(error as string);
}
// 修改后写法
catch (error) {
  setApiError((error as Error).message);
}

React不支持直接将Error对象作为子元素渲染，提取错误信息为字符串即可解决该报错。

核心问题（api导入为undefined）排查步骤 #

按以下优先级逐一验证即可定位根因：

• 核对导入路径匹配性
  你贴出的api定义文件名为api.ts，但组件中导入路径为import api from '../../core/api/models'，先确认两点：

  1. 你的api.ts是否存储在src/core/api/models.ts路径下
  2. 如果models是目录，需确认目录下的index.ts是否正确导出了api对象：export { default } from './api'
     如果路径不匹配，Storybook的模块解析规则可能会静默返回undefined，而非抛出导入错误。

• 对齐Storybook与项目的模块解析配置
  打开.storybook/main.ts（或main.js），确认webpack的resolve配置和你项目根目录tsconfig.json的baseUrl、paths配置完全对齐，示例配置如下：

import path from 'path';

export default {
  // 其他原有配置...
  webpackFinal: async (config) => {
    config.resolve = {
      ...config.resolve,
      modules: [path.resolve(__dirname, '../src'), 'node_modules'],
      extensions: ['.ts', '.tsx', '.js', '.jsx'],
      // 如果你项目配置了路径别名，也要在这里对应添加
      alias: {
        '@': path.resolve(__dirname, '../src'),
      },
    };
    return config;
  }
}

• 排查循环依赖
  如果api.ts和其他文件存在循环导入（比如api导入了组件依赖的工具文件，组件又导入了api），模块加载顺序异常会导致导出对象为undefined，可以用工具快速排查：
  执行npx madge --circular src/即可列出所有循环依赖，抽离公共逻辑解除依赖即可解决。

• 检查Storybook的全局mock配置
  确认是否在.storybook/preview.js、addon配置或者全局mock文件中，将api所在模块mock为了空对象，如果有相关配置，删除对应mock，或者在NewsList的story文件中手动导入真实api对象即可。

• 调整导入语法兼容配置
  如果你的tsconfig中esModuleInterop配置为false，默认导入语法可能不兼容，可以尝试修改导入语句：

// 原导入
import api from '../../core/api/models';
// 修改为
import * as api from '../../core/api/models';
// 打印api.default查看是否为目标对象，如果是可以调整tsconfig的esModuleInterop为true

内容的提问来源于stack exchange，提问作者John williams