Browser is not defined

[HarlamovEvgeniy]

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

I have this problem both when using @uniswap/widgets and when writing my widget via @uniswap/v3-sdk. I created a similar issue on the @uniswap/widgets project, but decided to duplicate it here, maybe someone has come across this.

I assume that the problem may lie in the collector and the absence of some polyphiles. But I use Vite with this vite,config.ts

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

[Meow711]

I have this issue with widget as well

[Yan-Doshchinskiy]

i have this issue, when i create new AlphaRouter instance

[Wunsz]

I've added a workaround in this comment, though I belive a proper solution should be found: https://github.com/Uniswap/widgets/issues/627#issuecomment-1930627298

[axer4]

i had the same issue, adding in

in index.html resolve this problem

[LilNait-S]

Agregué una solución alternativa en este comentario, aunque creo que se debe encontrar una solución adecuada: Uniswap/widgets#627 (comentario)

How could I solve it in Next.js?

[Wunsz]

@LilNait-S what we did is two steps:

1. In the module containing the component that uses the smart-order-router we added:

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

2. We made that whole component client-only (using "use client") directive

[c0rv0s]

I'm seeing the same thing when trying to import the AlphaRouter into a next js project. I've tried adding the 'use client' directive to the component and also only instantiating the class inside a useEffect gated by a if (typeof window !== "undefined") conditional and it doesn't change anything

[LilNait-S]

I'm seeing the same thing when trying to import the AlphaRouter into a next js project. I've tried adding the 'use client' directive to the component and also only instantiating the class inside a useEffect gated by a if (typeof window !== "undefined") conditional and it doesn't change anything

try this version , "@uniswap/smart-order-router": "3.19.3" , that works for me

[0x-sen]

a next js project can add a <Script/> in _document.tsx

import Script from "next/script";

<Script strategy="beforeInteractive" id="test">
      {`globalThis.Browser = { T: () => {} };`}
 </Script>

[IAmKio]

I'm seeing the same thing when trying to import the AlphaRouter into a next js project. I've tried adding the 'use client' directive to the component and also only instantiating the class inside a useEffect gated by a if (typeof window !== "undefined") conditional and it doesn't change anything

try this version , "@uniswap/smart-order-router": "3.19.3" , that works for me

Worth noting that 3.19.3 worked for us too, but later versions regressed.

[alicercedigital]

None of the solutions worked for us, but when we change the version to 3.19.3 then we could use this package

[garantor]

if you on expo or using global.js add globalThis.Browser = { T: () => {} }; to your global.js