React components folder not detected

Question

I'm getting the following error in react. It appears to be bit simillar to this one.

Can't resolve module (not found) in React.js

I tried the renaming .jsx files to .js files and rechecked the import path as given in the above question, but they still give me the same error. Here is an image of what my error looks like.vs code error and folder structure

Code of my App.js file is given below.

import './App.css';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import {ListSalaryComponent,CreateSalaryComponent,UpdateSalaryComponent,ListItemComponent,CreateItem,UpdateItemComponent,CreateMachineComponent,ListMachineComponent,UpdateMachineComponent} from './components';
import LogIn from './pages/LogIn';
import QuotationRequest from './pages/QuotationRequest';
import QuotationProcessIntro from './pages/QuotationProcessIntro';
function App() {
  return (
    <>
      <Router>
        <Switch>

          <Route exact path='/viewInvoice/:invoice_id'>
            <ViewInvoiceComponent />
          </Route>
          <Route path="/salaries" >
    <ListSalaryComponent/>
          </Route>
          <Route path="/add-salary">
          <CreateSalaryComponent/>
          </Route>
        <Route path="/update-salary/:id">
          <UpdateSalaryComponent/>
        </Route>
        <Route  path="/listitems"><ListItemComponent/></Route>
                  <Route  path="/items" ><ListItemComponent /></Route>
                  <Route  path="/add-item"><CreateItem/></Route>
                  <Route path="/edit-item/:item_code"> <UpdateItemComponent/></Route>

                
                <Route path="/machine-list" ><ListMachineComponent/></Route>
                <Route path="/machines"> <ListMachineComponent/></Route>
                <Route path="/add-Machine"> <CreateMachineComponent/></Route>
                <Route path="/update-Machine/:id"> <UpdateMachineComponent/></Route> 
              
      </Switch>
      </Router>
      <QuotationRequest></QuotationRequest>
    </>
  );
}

export default App;

Here is the complete error message I get.

ERROR in ./src/App.js 6:0-220 Module not found: Error: Can't resolve './components/' in 'D:\SLIIT\Y2S2\ITP\Project\Project Code\itp_project_group_b1-wd_b01_itp_g16\Development\itp-frontend\src' resolve './components/' in 'D:\SLIIT\Y2S2\ITP\Project\Project Code\itp_project_group_b1-wd_b01_itp_g16\Development\itp-frontend\src' Parsed request is a directory using description file: D:\SLIIT\Y2S2\ITP\Project\Project Code\itp_project_group_b1-wd_b01_itp_g16\Development\itp-frontend\package.json (relative path: ./src) Field 'browser' doesn't contain a valid alias configuration using description file: D:\SLIIT\Y2S2\ITP\Project\Project Code\itp_project_group_b1-wd_b01_itp_g16\Development\itp-frontend\package.json (relative path: ./src/components) as directory existing directory D:\SLIIT\Y2S2\ITP\Project\Project Code\itp_project_group_b1-wd_b01_itp_g16\Development\itp-frontend\src\components using description file: D:\SLIIT\Y2S2\ITP\Project\Project Code\itp_project_group_b1-wd_b01_itp_g16\Development\itp-frontend\package.json (relative path: ./src/components) using path: D:\SLIIT\Y2S2\ITP\Project\Project Code\itp_project_group_b1-wd_b01_itp_g16\Development\itp-frontend\src\components\index using description file: D:\SLIIT\Y2S2\ITP\Project\Project Code\itp_project_group_b1-wd_b01_itp_g16\Development\itp-frontend\package.json (relative path: ./src/components/index) no extension Field 'browser' doesn't contain a valid alias configuration D:\SLIIT\Y2S2\ITP\Project\Project Code\itp_project_group_b1-wd_b01_itp_g16\Development\itp-frontend\src\components\index doesn't exist .web.mjs Field 'browser' doesn't contain a valid alias configuration D:\SLIIT\Y2S2\ITP\Project\Project Code\itp_project_group_b1-wd_b01_itp_g16\Development\itp-frontend\src\components\index.web.mjs doesn't exist .mjs Field 'browser' doesn't contain a valid alias configuration D:\SLIIT\Y2S2\ITP\Project\Project Code\itp_project_group_b1-wd_b01_itp_g16\Development\itp-frontend\src\components\index.mjs doesn't exist .web.js Field 'browser' doesn't contain a valid alias configuration D:\SLIIT\Y2S2\ITP\Project\Project Code\itp_project_group_b1-wd_b01_itp_g16\Development\itp-frontend\src\components\index.web.js doesn't exist .js Field 'browser' doesn't contain a valid alias configuration D:\SLIIT\Y2S2\ITP\Project\Project Code\itp_project_group_b1-wd_b01_itp_g16\Development\itp-frontend\src\components\index.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration D:\SLIIT\Y2S2\ITP\Project\Project Code\itp_project_group_b1-wd_b01_itp_g16\Development\itp-frontend\src\components\index.json doesn't exist .web.jsx Field 'browser' doesn't contain a valid alias configuration D:\SLIIT\Y2S2\ITP\Project\Project Code\itp_project_group_b1-wd_b01_itp_g16\Development\itp-frontend\src\components\index.web.jsx doesn't exist .jsx Field 'browser' doesn't contain a valid alias configuration D:\SLIIT\Y2S2\ITP\Project\Project Code\itp_project_group_b1-wd_b01_itp_g16\Development\itp-frontend\src\components\index.jsx doesn't exist @ ./src/index.js 8:0-24 12:33-36

webpack 5.70.0 compiled with 1 error and 1 warning in 676 ms