Widget doesn't work with Vite

[torhector2]

Bug Description When you integrate the swap widget in a React app with Vite the widget won't work. There are 2 things happening:

1. When in developer mode the widget UI would appear on screen, and it would work well for swapping ETH to WETH as it doesn't seem to need to perform any conversion between the 2 of them, but if you select a different token like ETH and DAI the widget will try to fetch prices and will show an error on screen: "Error: Could not parse fraction"

Inspecting the console we can see this error log: "Uncaught Error: Could not parse fraction at Function.tryParseFraction (fraction.ts:38:11)"

If we follow the error we get to this line of code:

2. In preview mode the page won't load and the following error will appear on the console: "index-094e7416.js:766 Uncaught TypeError: n.BigInt is not a function"

Steps to Reproduce Dev mode

1. Create a Vite app with react and install Uniswap widgets with their dependencies. Create a simple page with the Swap widget.
2. Run the app with yarn dev and try to swap ETH for DAI (or any token that'd need a conversion).
3. The widget will try to fetch prices and fail after a few seconds.

Preview mode

1. Create a Vite app with react and install Uniswap widgets with their dependencies. Create a simple page with the Swap widget.
2. Run the app with yarn preview
3. The app won't load and you could see the error in the console

Expected Behavior The widget should work fine with Vite

Environment Information Node v16.14.2 React: 18.2.0 Vite: 4.3.5 Uniswap/widgets: 2.51.2

Additional context This doesn't happen with Nextjs as I created a small project to test it.

I hope this issue can be addressed so that the @uniswap/widgets library can be used more effectively in Vite-based projects. If there are any temporary workarounds or further actions I can take on my end to alleviate these issues, I would greatly appreciate any guidance.

Thank you for your time and your work on this library.

[DeveloperTheExplorer]

I have the same problem. It's failing to load in Storyboard for me.

[beautyfree]

my vite.config.ts which fixes all problems:

import { nodePolyfills } from "vite-plugin-node-polyfills";

  {
    plugins: [nodePolyfills()],
    resolve: {
      alias: {
        jsbi: path.resolve(__dirname, "./node_modules/jsbi/dist/jsbi-cjs.js"),
        "~@fontsource/ibm-plex-mono": "@fontsource/ibm-plex-mono",
        "~@fontsource/inter": "@fontsource/inter",
      },
    },
    build: {
      commonjsOptions: {
        transformMixedEsModules: true,
      },
    },
  }

[k4ta-dev]

my vite.config.ts which fixes all problems:

import { nodePolyfills } from "vite-plugin-node-polyfills";

  {
    plugins: [nodePolyfills()],
    resolve: {
      alias: {
        jsbi: path.resolve(__dirname, "./node_modules/jsbi/dist/jsbi-cjs.js"),
        "~@fontsource/ibm-plex-mono": "@fontsource/ibm-plex-mono",
        "~@fontsource/inter": "@fontsource/inter",
      },
    },
    build: {
      commonjsOptions: {
        transformMixedEsModules: true,
      },
    },
  }

This works.