Vite app works in DEV but not after BUILD and PREVIEW: BigInt is not a function

Question

Hey everyone I have been stuck on this problem for a little bit, I tried many suggested solutions with vite config and tsconfig changes. but I am still getting a problem with BigInt when building my Vite based react TS project

The app fully works when running npm run dev, with no errors and the build completes with no errors

I am getting this error:

index-02ef721e.js:127068 Uncaught TypeError: r2.BigInt is not a function
    at index-02ef721e.js:127068:327
    at assets/index-02ef721e.js (index-02ef721e.js:128109:7)
    at __require (index-02ef721e.js:5:50)
    at index-02ef721e.js:244853:16

after running

npm run build
npm run preview

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      process: "process/browser",
      stream: "stream-browserify",
      util: 'util'
    }
  },
  build: {
    minify: false,
    target: "es2020", // Enable Big integer literals
    commonjsOptions: {
      transformMixedEsModules: true, // Enable @walletconnect/web3-provider which has some code in CommonJS
    },

    rollupOptions: {
      // maxParallelFileOps: 2,
      cache: false,
    },
    outDir: "dist",
  },
  plugins: [
    react(),
    nodePolyfills({
      // To add only specific polyfills, add them here. If no option is passed, adds all polyfills
      include: ['path', 'https'],
      // To exclude specific polyfills, add them to this list. Note: if include is provided, this has no effect
      exclude: [
        'fs', // Excludes the polyfill for `fs` and `node:fs`.
      ],
      // Whether to polyfill specific globals.
      globals: {
        Buffer: true, // can also be 'build', 'dev', or false
        global: true,
        process: true,
      },
      // Whether to polyfill `node:` protocol imports.
      protocolImports: true,
    })],
    optimizeDeps: {
      esbuildOptions: {
        target: "es2020", // Enable Big integer literals
        define: {
          global: "globalThis",
        },
        supported: {
          bigint: true,
        },
      },
    },
})

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "ESNext", "DOM", "DOM.Iterable"],
    "module": "CommonJS",
    "skipLibCheck": true,
    "esModuleInterop": true,
    /* Bundler mode */
    // "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Answer 1

The issue I experienced was related to Uniswap package dependancy.

To resolve this I installed JSBI 3.2.1 and then polyfilled it in vite.config.js under the resolve section

jsbi: path.resolve(__dirname, 'node_modules/jsbi'),