import components with ~ instead of './'

In my pages/screens folder, I made an index file and did something like this:

export * from './UserPage';export * from './users/SearchPage';

So now, when I want to import components from these pages in my App.tsx file, I can just

import { SearchPage, NewPage } from './pages'; 

instead of typing the full relative path. However, I want to use something like

import { SearchPage, NewPage } from '~/pages'; 

For this, I added this into my tsconfig.json file as it seemed to work in another project but it's not working for me here:

"paths": {"~/*": ["./*"],"~": ["./"]    },

How else can I change my import format?

Edit:tsconfig.json:

{"compilerOptions": {"target": "es5","lib": ["dom","dom.iterable","esnext"    ],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "preserve","baseUrl": "./src","paths": {"@modules/*": ["modules/*"],"@config/*": ["config/*"],"@shared/*": ["shared/*"]    },  },"include": ["src"  ]}