Uniswap Widget 现在可与 next.js 14 配合使用

Question

任何将 uniswap 与 next.js 14 集成的人。我将其与 next.js 14 一起使用，如果我使用“use client”指令，我会收到以下错误

./node_modules/brotli/build/encode.js:2:141
Module not found: Can't resolve 'fs'

如果我不使用“使用客户端”指令，我会收到以下错误。

Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

交换小部件的任何更新。这是我的代码

// '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 小部件能够正常工作

Answer 1

将此配置添加到

next.config.js

文件

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack: config => {
    config.resolve.fallback = {
      fs: false,
    };
    return config;
  },
  transpilePackages: [
    '@uniswap/widgets',
    '@uniswap/conedison'
  ],
}
module.exports = nextConfig;