Uniswap Widget在Next.js 14中集成报错求助

问题根源 #

添加'use client'后报错Can't resolve 'fs'，是因为Uniswap Widget依赖的brotli包引用了Node.js专属的fs模块，但客户端浏览器环境不存在这个模块；不加'use client'则因组件用到React Context，必须在客户端组件中运行，所以出现冲突。

解决方案 #

1. 保留'use client'指令 #

组件顶部必须加上'use client';，这是运行Uniswap Widget的必要条件——它依赖客户端的React特性才能正常工作。

2. 配置Next.js忽略fs模块解析 #

在项目根目录的next.config.js（没有则新建）中添加webpack配置，让客户端构建时跳过fs模块的解析：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    // 仅在客户端构建时忽略fs及相关Node.js模块
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        fs: false,
        path: false, // 部分场景下可能需要额外忽略path模块
      };
    }
    return config;
  },
};

module.exports = nextConfig;

3. 重启开发服务器 #

修改配置后必须重启Next.js开发服务器，确保配置生效。

验证修改后的组件代码 #

你的组件代码应调整为：

'use client';

import React from 'react';
import '@uniswap/widgets/fonts.css';
import { SwapWidget } from '@uniswap/widgets';

const Uniswap = () => {
  return (
    <div className="Uniswap">
      <SwapWidget />
    </div>
  );
};

export default Uniswap;

额外注意事项 #

• 如果仍出现类似模块找不到的错误，可检查Uniswap Widget依赖的其他Node.js专属模块，同样在resolve.fallback中设为false。
• 尝试更新@uniswap/widgets到最新兼容版本：

  npm update @uniswap/widgets
  

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