Webpack resolve.alias does not work with typescript?

Question

I try to shorten my imports in typescript

from import {Hello} from \"./components/Hello\";

to import {Hello} from \"Hello\";

<

Answer 1

You are missing one very important point in tsconfig.json: The matching pattern!

It should be configured like this:

"baseUrl": ".",
"paths": {
    "appSrc/*": [
        "src/*"
    ]
 }

The "*" is the important part to tell TS to match anything on the right side.

I found that out from this article: Type-safe es2015 module import path aliasing with Webpack, Typescript and Jest

NOTE

• Make sure all your webpack.config.js are updated (e.g. if you use storybook).
• If you use Visual Studio Code you may need to restart it, in order for the squiggly lines to disappear.