starcorn starcorn - 26 days ago 19
TypeScript Question

Webpack resolve.alias does not work with typescript?

I try to shorten my imports in typescript

from

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


to
import {Hello} from "Hello";


For that I found out you can use
resolve.alias
in webpack thus I configured that part as following

resolve: {
root: path.resolve(__dirname),
alias: {
Hello: "src/components/Hello"
},
extensions: ["", ".ts", ".tsx", ".js"]
},


Webpack builds, and the output bundle.js works. However typescript's intellisense complain it
cannot find the module


So my question is whether or not webpack's resolve.alias works with typescript?

I found following issue but there's no answer to it.

Answer

If you're using ts-loader, you'll have to syhchronize your webpack alias settings with your paths setting in your tsconfig.json.

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

If you're using awesome-typescript-loader, then webpack can figure this out automatically from the paths setting in your tsconfig.json, as per the status on this issue from the repo.

Comments