How to fix absolute path setting error in React?

Question

I am trying to create a project with react.

I created jsconfig.json in the React Rootfolder and set the absolute path, but this error appears.

How to solve it?

This is your project folder.

// jsconfig.json
{
    "compilerOptions": {
      "baseUrl": "src"
    },
    "include": [
      "src"
    ]
}

// package.json
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

I created the project with CRA.

Module not found: Error: Can't resolve 'Views/Welcome' in '/Users/my-app/src' Did you mean './Views/Welcome'? Requests that should resolve in the current directory need to start with './'. Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /Users/my-app/node_modules). If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

// App.jsx
import './styles/App.scss';
import {Route, Routes} from 'react-router-dom';
import Welcome from 'Views/Welcome'
import Visit from 'Views/Visit';
function App() {
  return (
    <div className="App">
      <Routes>
        <Route exact path = '/' element={<Welcome />}/>
        <Route exact path = '/visit' element={<Visit />}/>
      </Routes>
    </div>
  );
}

export default App;

My react and node version is "node": "^17.5.0", "react": "^17.0.2".