When I introduced node-fetch in my codebase I get 'import_node_fs.promises' as it is undefined

Question

I am working on a Vite project with React and I am trying to make a request with node-fetch. I have installed the dependency as described in the docs but I am getting this logs on browser console.(Test it on chrome and edge and the give me the same error.)

Uncaught TypeError: Cannot destructure property 'stat' of 'import_node_fs.promises' as it is undefined.

VITE v4.4.9
Node.js v20.5.1

package.json

"node-fetch": "^3.3.1"

Basically, as soon as I am introducing the fetch, my website doesn't load anymore and I get the not defined error.

import fetch from 'node-fetch';

const onSubmit = async () => {
  const x = await fetch('localhost:8080');
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "ESNext",
    "skipLibCheck": 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": [
    "vite.config.ts",
    ".eslintrc.cjs",
    ".prettierrc.cjs",
    "tailwind.config.js",
    "postcss.config.js",
    "src",
    "test"
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}

vite.config.js

/* eslint-disable import/no-extraneous-dependencies */
/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: ['./test/setup.ts'],
  },
});

What am I missing here ?? Thanks guys :)