React应用报错：stream-chat-react中未找到MessageTeam导出组件

问题说明 #

开发Stream API聊天应用时，导入MessageTeam组件出现报错："export 'MessageTeam' (imported as 'MessageTeam') was not found in 'stream-chat-react'"，相关代码如下：

import React from "react";
import { MessageTeam, useMessageContext } from "stream-chat-react";

const TeamMessage = () => {
  const { message } = useMessageContext();

  return (
    <MessageTeam
      message={{ ...message, user: {} }}
    />
  );
};

export default TeamMessage;

报错截图：

原因分析 #

MessageTeam是stream-chat-react旧版本（v8及更早）中的团队风格消息组件，在v9及以上的新版本中，该组件已被移除，统一整合到通用的Message组件中，通过自定义配置实现不同风格的消息展示。

解决方案 #

方案1：适配新版本（推荐） #

使用新版的Message组件替代，可通过自定义样式或props实现团队风格的消息布局：

import React from "react";
import { Message, useMessageContext } from "stream-chat-react";

const TeamMessage = () => {
  const { message } = useMessageContext();

  return (
    <Message
      message={{ ...message, user: {} }}
      // 自定义类名来实现团队消息的样式
      wrapperClassName="team-style-message"
    />
  );
};

export default TeamMessage;

之后可以通过CSS调整.team-style-message的样式，匹配原MessageTeam的展示效果。

方案2：降级到旧版本 #

如果需要继续使用MessageTeam组件，可以降级stream-chat-react到支持该组件的版本，比如执行以下命令：

npm install stream-chat-react@8.29.0
# 或使用yarn
yarn add stream-chat-react@8.29.0

注意降级后需要确保其他依赖（如stream-chat核心库）版本兼容，避免出现其他报错。

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