npm run dev

[carloscbrls]

Describe the bug

[plugin:vite:import-analysis] Failed to resolve import "react-router-dom" from "src/App.tsx". Does the file exist?
/home/project/src/App.tsx:2:78
16 | }
17 | var _s = $RefreshSig$();
18 | import { BrowserRouter as Router, Routes, Route, Navigate, useLocation } from "react-router-dom";
| ^
19 | import { Header } from "./components/Header";
20 | import { Dashboard } from "./components/Dashboard";

Link to the Bolt URL that caused the error

https://bolt.new/~/sb1-dplaafny

Validations

• Please make your project public or accessible by URL. This will allow anyone trying to help you to easily reproduce the issue and provide assistance.

Steps to reproduce

Project has Microsoft SSO integration partially set up
Dependencies for MSAL are installed but not properly configured
Build errors occurring due to module resolution issues
Issue Description: The build is failing because:
MSAL browser dependencies can't be resolved
Path aliases aren't properly configured
Module resolution is not handling the Microsoft authentication packages correctly

Expected behavior

Required Changes:
First, let's update the package.json to ensure we have the correct dependencies:

Update dependencies for Microsoft SSO

package.json
Now let's update the Vite configuration to properly handle MSAL dependencies:

Update Vite configuration for MSAL

vite.config.ts
Expected Outcome:
Build should complete successfully
Microsoft authentication should work properly
No module resolution errors
Actual Outcome:
The changes should resolve the build errors and allow the application to properly handle Microsoft authentication.

Environment Details:

Node.js environment in WebContainer
Vite as the build tool
React with TypeScript
MSAL for Microsoft authentication
Verification Steps:
Ensure all dependencies are installed:

npm install
Start the development server:

npm run dev
Verify that no build errors occur
Test Microsoft authentication flow
The key changes made:

Added proper dependencies in package.json
Updated Vite configuration to handle MSAL modules
Added optimizeDeps configuration
Set up proper chunking for auth-related code

Screen Recording / Screenshot

Platform

Browser name = Chrome
Full version = 131.0.0.0
Major version = 131
navigator.appName = Netscape
navigator.userAgent = Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
performance.memory = {
  "totalJSHeapSize": 356389114,
  "usedJSHeapSize": 258061846,
  "jsHeapSizeLimit": 4294705152
}
Username = carloscbrls
Chat ID = 598f2bef96f8
Client version = 9c3305d
Server version = 962135e

Additional context

lathroplittleleaguevolunteer.netlify.app