在Next.js 12中使用stream-chat-react时出现模块未找到错误

问题背景 #

我在Next.js 12环境中使用stream-chat-react编写了如下聊天组件：

import { Chat } from 'stream-chat-react';
import { useState, useEffect } from 'react';
import { StreamChat } from 'stream-chat';

function Chats ({streamToken, user}) {
  const [chatsClient, setChatsClient] = useState<StreamChat>(StreamChat.getInstance('API_KEY'));

  useEffect(() => {
    if (chatsClient && user.id) {
      chatsClient.connectUser({ id: user.id }, streamToken);
    }
  }, []);

  return (
    <div>
        {chatsClient ? <Chat client={chatsClient}></Chat> : <div>Loading...</div>}
    </div>
  )
}

运行错误 #

执行代码时出现模块找不到错误：

./node_modules/@react-aria/interactions/dist/usePress.mjs:3:0
Module not found: Can't resolve '@swc/helpers/_/_class_private_field_get'

Import trace for requested module:
./node_modules/@react-aria/interactions/dist/import.mjs
./node_modules/@react-aria/focus/dist/useFocusable.mjs
./node_modules/@react-aria/focus/dist/import.mjs
./node_modules/stream-chat-react/dist/components/Modal/Modal.js
./node_modules/stream-chat-react/dist/components/Modal/index.js
./node_modules/stream-chat-react/dist/components/index.js
./node_modules/stream-chat-react/dist/index.js
./pages/pro/chats/index.tsx

已尝试方案 #

• 安装@swc/helpers包（版本^0.5.12）
• 检查stream-chat-react与Next.js 12的兼容性
• 在next.config.ts中配置webpack：

webpack: (config, { isServer }) => {
  // Fixes npm packages that depend on `fs` module
  if (!isServer) {
    config.resolve.fallback.fs = false;
  }
  return config;
},

以上方案均未解决问题，求可行解决方案。

解决方案建议 #

1. 锁定@swc/helpers到兼容版本 #

Next.js 12自带的SWC版本与@swc/helpers@0.5.x存在兼容性冲突，尝试安装适配的旧版本：

npm install @swc/helpers@0.4.14
# 或使用yarn
yarn add @swc/helpers@0.4.14

2. 配置webpack别名修正模块路径 #

如果模块解析路径异常，在next.config.ts中添加别名配置，确保webpack能正确找到@swc/helpers：

import path from 'path';

const nextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback.fs = false;
    }
    // 添加别名指向本地node_modules中的@swc/helpers
    config.resolve.alias['@swc/helpers'] = path.resolve(__dirname, 'node_modules/@swc/helpers');
    return config;
  },
};

export default nextConfig;

3. 降级stream-chat-react到适配版本 #

新版本stream-chat-react依赖的@react-aria包使用了Next.js 12不支持的SWC特性，尝试降级到兼容版本：

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

4. 用Babel转译@react-aria相关模块 #

在next.config.ts中配置transpilePackages，强制使用Babel转译@react-aria及其依赖，绕过SWC兼容性问题：

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  transpilePackages: ['@react-aria', '@react-stately', '@react-spectrum'],
};

export default nextConfig;

5. 清理缓存并重装依赖 #

缓存可能导致依赖解析异常，执行以下命令重置环境：

# 删除依赖、缓存和锁文件
rm -rf node_modules .next package-lock.json yarn.lock
# 重新安装依赖
npm install
# 或 yarn install

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