widgets Error fetching trade

Bug Description The problem occurs on the widget screen. The endless error "Error fetching trade"

Versions: Vite: 4.5.1 React: 18.2.0 TypeScript: 5.3.3 @uniswap/widgets: 2.59.0 ...

Expected Behavior A clear and concise description of what you expected to happen.

Jan 26 '24 09:01 HarlamovEvgeniy

My vite.config.ts

import react from '@vitejs/plugin-react'
import { fileURLToPath } from 'url'
import { defineConfig } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'
import svgLoader from 'vite-svg-loader'
import { chunkSplitPlugin } from 'vite-plugin-chunk-split';
import { nodePolyfills } from "vite-plugin-node-polyfills"
import path from "path";

export default defineConfig({
  plugins: [
    react(),
    createHtmlPlugin({
      minify: true,
      entry: '/src/main.tsx',
      template: '/index.html',
    }),
    svgLoader(),
    chunkSplitPlugin({
      strategy: 'unbundle',
    }),
    nodePolyfills()
  ],
  server: {
    port: 3000,
    open: true,
  },
  optimizeDeps: {
    esbuildOptions: {
      define: {
        global: 'globalThis'
      }
    }
  },
  resolve: {
    alias: {
      "@": fileURLToPath(new URL('./src', import.meta.url)),
      jsbi: path.resolve(__dirname, "./node_modules/jsbi/dist/jsbi-cjs.js"),
      process: "process/browser",
      buffer: "buffer",
      crypto: "crypto-browserify",
      stream: "stream-browserify",
      assert: "assert",
      http: "stream-http",
      https: "https-browserify",
      os: "os-browserify",
      url: "url",
      util: "util",
    }
  },
  build: {
    outDir: path.join(__dirname, "build"),
    sourcemap: false,
    minify: true,
    commonjsOptions: {
      transformMixedEsModules: true,
    }
  },
})

Jan 26 '24 09:01 HarlamovEvgeniy

Same issue with me not sure if its a Vite thing. Got to launch a frontend for my token was thinking could add a widget before liquidity pool is set since short on time. I guess will have to take the sdk-v3 route for quotes and swapping

Jan 29 '24 20:01 Asharp19

Same

Jan 30 '24 12:01 Antonio100898

We are facing the same issue with the same configuration. Any solution?

Jan 31 '24 04:01 SerovMihail

The only solution that helped me was to implement my widget using the SDK-v3

Jan 31 '24 09:01 HarlamovEvgeniy

May I ask you to share the code with me? I would appreciate a lot if you could just give a direction of what I need to change for my own project (provider/rpc addresses etc.)

среда, 31 января 2024 г. пользователь HarlamovEvgeniy < @.***> написал:

The only solution that helped me was to implement my widget using the SDK-v3

— Reply to this email directly, view it on GitHub https://github.com/Uniswap/widgets/issues/627#issuecomment-1918725952, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXWUE23TC5PMYUAKVDQ6CTDYRIF4LAVCNFSM6AAAAABCL3I65OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMJYG4ZDKOJVGI . You are receiving this because you commented.Message ID: @.***>

Feb 01 '24 06:02 Antonio100898

Any solution?

Feb 01 '24 21:02 HarlamovEvgeniy

Same! "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.8.0", "@uniswap/widgets": "2.59.0", "@metamask/detect-provider": "2.0.0", "ethers": "5.7.2",

Feb 03 '24 09:02 Chi111

The only solution that helped me was to implement my widget using the SDK-v3

Can You Give Me a demo? My project is still wrong

Feb 03 '24 10:02 Chi111

Can You Give Me a demo? My project is still wrong

I can't share it because the reason is in the smart-order-router library, and I couldn't make my own implementation:(

Feb 04 '24 23:02 HarlamovEvgeniy

Any update for that? I;m facing the same problem with Next.js

Feb 06 '24 13:02 dziobakwszafie

My summary of the issue so far is as follows:

This issue occurs at least on the following browsers:

Chrome 121.0.6167.139 (Official Build) (64-bit)
Firefox 122.0 (64-bit)

This issue occurs in all the latest bundlers:

Vite (Rollup)
CRA (Webpack5)
NextJS (Webpack5)

The core issue is in this package: https://github.com/foliojs/brotli.js which is a dependency of @uniswap/smart-order-router package. There is an old issue raised for that so it's unclear why this resurfaced here just now: https://github.com/foliojs/brotli.js/issues/20

The workaround we found so far (dirty one) is to monkey patch the window object and tell it that the Browser.T function exists:

window.Browser = {
    T: () => {}
}

Feb 06 '24 19:02 Wunsz

Following

Feb 19 '24 19:02 fabdarice

same

Feb 21 '24 16:02 smartbart1

Any update for that? I;m facing the same problem with Next.js

The same issue but with @uniswap/smart-order-router

Feb 23 '24 03:02 LilNait-S

Same issue and bunches of error when installing the widget, this definitely not working with nextjs 14 and the given workaround

Mar 12 '24 07:03 lisabeyy

same issue with nextjs@14

Mar 18 '24 08:03 russell0430

same issue with nextjs@14 x2

Mar 21 '24 12:03 Dariocoding

¿What should i do? Shit

Mar 21 '24 12:03 Dariocoding

What works for us is:

Specify "use client"; at the top of the file where you use the SwapWidget component
Before the component is defined, we add:

if (typeof window !== "undefined") {
// @ts-ignore
  window.Browser = {
    T: () => {
    }
  };
}

Add this to your next.js config:

/** @type {import('next').NextConfig} */
// 👇️ assumes you use Webpack 5
module.exports = {
  webpack: (config) => {
    config.resolve.fallback = {
      fs: false,
      path: false,
      Browser: false,
    };

    return config;
  },
  externals: ["pino-pretty"],
};

Sample component code:

"use client";

import React from "react";
import { SwapWidget } from "@uniswap/widgets";


if (typeof window !== "undefined") {
    // @ts-ignore
      window.Browser = {
        T: () => {
        }
      };
    }
    

const SwapComponent = () => <SwapWidget />;

export default SwapComponent;

And that actually made it work some time ago but you will now hit:

For now you can try my fork here: https://www.npmjs.com/package/@wunsz-4soft/uniswap-widgets

But I do not guarantee anything, especially its maintenance.

Mar 22 '24 18:03 Wunsz

Same issue on the version - 2.59.0. And the @Wunsz 's workaround is not working for me.

    "@uniswap/widgets": "^2.59.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-redux": "^9.1.2",
    "react-scripts": "5.0.1",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"