imports/exports using the ~ sign

I have a components folder where I am defining components like this:

export const ResultAlert: FunctionComponent<ResultAlertProps> = ({  severity,  text,}) => {  const classes = useStyles();  return (<Alert className={classes.alert} severity={severity}>      {''}      {text}</Alert>  );};

In my components folder, I have made an index.tsx file that says:

export * from './alerts/ResultAlert';

Now, I need a way to make imports work like this:

import {ResultAlert} from '~/components';

Currently, this gives me an error that

Cannot find module '~/components' or its corresponding type declarations.

I have seen this work in the past but I am not sure how. What am I missing out? Do I need to setup any framework else for this?