Error fetching trade

[HarlamovEvgeniy]

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.

[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,
    }
  },
})

[Asharp19]

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

[Antonio100898]

Same

[SerovMihail]

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

[HarlamovEvgeniy]

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

[Antonio100898]

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 <#627 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXWUE23TC5PMYUAKVDQ6CTDYRIF4LAVCNFSM6AAAAABCL3I65OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMJYG4ZDKOJVGI> . You are receiving this because you commented.Message ID: ***@***.***>

[HarlamovEvgeniy]

Any solution?

[Chi111]

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",

[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

[HarlamovEvgeniy]

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:(

[dziobakwszafie]

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

[Wunsz]

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:
foliojs/brotli.js#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: () => {}
}

[fabdarice]

Following

[smartbart1]

same

[LilNait-S]

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

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

[lisabeyy]

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

[russell0430]

same issue with nextjs@14

[Dariocoding]

same issue with nextjs@14 x2

[Dariocoding]

¿What should i do? Shit

[Wunsz]

What works for us is:

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

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

3. 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.

[linxux]

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"

[limian1858]

same

[GolfredoPerezFernandez]

what should we do!

[hieppd79]

any solution for nextjs14 guys?

[dziobakwszafie]

any solution for nextjs14 guys?

nope, that library is a big piece of you know what, recommend to do it on your own, will be still faster then fixing all the bugs in there