Absolute Path Not working for create react app with typescript

Question

If I use absolute path which configured with typescript it doesn't work. After adding config in tsconfig file I can navigate to the file in vscode by clicking on component. But Project doesn't run. Please help me if there any issue with my config.

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "~/*": ["./*"]
    },
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "exclude": ["node_modules", "build"]
}

Here is my main route file

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import { Login, Movie } from '~/pages';

const AppRouter: React.FC = (props) => {
  return (
    <Routes>
      <Route path="" element={<Movie />} />
      <Route path="login" element={<Login />} />
    </Routes>
  );
};

export default AppRouter;

When I click on component it goes to the file successfully. But when I run the project. It show me error message

Failed to compile.

Module not found: Error: Can't resolve '~/pages' in '/Volumes/Workplace/ababa_tech_task/frontend/src/routes'
ERROR in ./src/routes/index.tsx 6:0-39
Module not found: Error: Can't resolve '~/pages' in '/Volumes/Workplace/ababa_tech_task/frontend/src/routes'

webpack compiled with 1 error
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
No issues found.

It work like this ->

...
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "pages": ["src/pages"]
    },
}

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import { Login, Movie } from 'pages'; // pages instead of ~/pages working

const AppRouter: React.FC = (props) => {
  return (
    <Routes>
      <Route path="" element={<Movie />} />
      <Route path="login" element={<Login />} />
    </Routes>
  );
};

export default AppRouter;

But I don't want to keep like this. Because It will confusing. direct module path means comes from node_modules and I want to keep ~/* which means comes from src folder

I used other project with react-rewired-app which worked. but I don't want to do like this.

Answer 1

You gotta check if there's a "type": "module" in your package.json, cause then you'll need to write the ext. in every file you import:

import { Login, Movie } from '~/pages.tsx';

If that's the case, you can simply remove "type": "module"

Answer 2

You are using create-react-app so you must follow the pattern set by them.

create-react-app explains in their documentation how to use absolute imports for typescript projects.

If your project looks something like this:

    |- project
    |- src
       |-- components
       |-- pages
            |- index.ts
            |- Login.tsx
            |- Movie.tsx

your import should look like this:

    import {Login, Movie} from 'paths'