Javascript – React App Shows White Screen After Adding New Routes

[1]I’m working on a React application and recently added new routes to my App.jsx file. However, after adding these routes, my application only shows a white screen. When I remove the new code, the landing page displays correctly again.

Here is the relevant excerpt from my App.jsx file:

import Landing from './landing';
import Login from './login';
import {
  BrowserRouter as Router,
  Route,
  Switch
} from 'react-router-dom';

const Main = () => {
  return (
    <Router>
      <Switch>
        <Route path="/landing" exact component={Landing} />
        <Route path="/login" component={Login} />
      </Switch>
    </Router>
  );
};

export default Main;

I’ve checked the following:

I get this error:

[plugin:vite:import-analysis] Failed to resolve import "./landing" from "src/App.jsx". Does the file exist?

I’ve restarted the development server.
There are no typos or case sensitivity issues in the import statements.
Despite these checks, the white screen persists. What could be causing this issue, and how can I resolve it?

What I Expected:

I expected the application to navigate to the Landing component when accessing "/landing" and to the Login component when accessing "/login".

What Actually Happened:

After adding the new routes, the application only shows a white screen. When I remove the new code, the landing page displays correctly again.

[since yall wanted to see the login.jsx code] [1]: https://i.sstatic.net/i3mcv0j8.png