Vercel error ( Rollup failed to resolve import "react-router-dom" )

Question

Currently I'm trying to deploy by app using Vercel. I'm using React (with Vite), NodeJS and MongoDB. I receive the following error: vercel error.

This is my vercel.json:

{
    "buildCommand": "cd client && npm install && ./node_modules/vite/bin/vite.js build",
    "outputDirectory": "client/dist",
    "framework": "vite",
    "rewrites": [
      {
        "source": "/server/(.*)",
        "destination": "/server/index.js"
      }
    ]
  }

My file structure: enter image description here

main.jsx where the error occurs:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

import {BrowserRouter} from 'react-router-dom'
import { UserContextProvider } from './context/UserContext'

ReactDOM.createRoot(document.getElementById('root')).render(
    <BrowserRouter>
        <UserContextProvider>
            <App />
        </UserContextProvider>
    </BrowserRouter>

)

The buildCommand works in the terminal and creates the 'dist' folder (which I delete), but not with Vercel. I've tried solutions from this post, however they have not worked as of yet. Why does react-router not works at vercel?

Help would be great, thanks.