Storybook报错：Object(...) is not a function 组件导入问题求助

1. 给Storybook注入i18n上下文 #

应用里能正常用t，基本是因为根组件外层包裹了i18n的Provider（比如react-i18next的I18nextProvider），但Storybook的组件渲染环境没这个上下文。

在.storybook/preview.js里添加初始化和Provider包裹：

import { I18nextProvider } from 'react-i18next';
import i18n from '../src/i18n'; // 替换成你的i18n配置文件路径

export const decorators = [
  (Story) => (
    <I18nextProvider i18n={i18n}>
      <Story />
    </I18nextProvider>
  ),
];

2. 确保翻译资源被Storybook正确解析 #

如果翻译文件是静态JSON，检查Storybook的webpack配置是否能处理这类文件。在.storybook/main.js中添加对应规则：

const path = require('path');

module.exports = {
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.json$/,
      type: 'javascript/auto',
      include: path.resolve(__dirname, '../src/locales'), // 替换成你的翻译文件目录
    });
    return config;
  },
};

3. 检查组件中t的获取方式 #

如果用的是react-i18next，确保通过useTranslation hook获取t，而非直接导入：

// 正确写法
import { useTranslation } from 'react-i18next';

const YourComponent = () => {
  const { t } = useTranslation();
  return <div errorMessage={t('intake.health_profile_card_error')} />;
};

如果是自定义t函数，检查导入路径是否正确，或者在Storybook的main.js里配置路径别名，确保模块能被正确找到。

4. 验证环境变量配置 #

如果i18n依赖环境变量，在Storybook的.env文件中配置对应变量，或者在.storybook/main.js里注入环境变量。

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