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

There are 2 cases

1. When you write custom webpack It works with typescript but not directly. To explain, there are 2 types of compilation happening in backstage. First tsx -> js for which tsconfig.json plays the role, but when you actually compile the js code then webpack comes into picture. So for aliases, resolve should be placed at both places i.e in tsconfig and webpack to successfully run the application
2. when you use default(after create react app): You just need to add "baseUrl": "./src" in tsconfig and see the code work.

Answer 2

If you're using ts-loader, you might have to synchronize your webpack alias/resolve 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. That way, you don't need to duplicate the same information in your Webpack alias field.

Answer 3

I had to make a small adjustment to Caio Saldanha's solution to make it work in my environment.

I am using Babel 7 with babel-plugin-module-resolver to resolve aliases. No ts-loader or awesome-typescript-loader as Babel 7 supports TypeScript out of the box using @babel/preset-typescript. I had to add an extra path configuration for each alias to load the module root (e.g. index.ts) automagically:

"baseUrl": ".",
"paths": {  // this must be synchronized with .babelrc.js's module-resolver alias config
    "component": ["src/component/index.ts"],
    "component/*": ["src/component/*"],
    ...
}

Having an index.ts in the /component folder with the following content:

export { default as Logo } from './Logo';

Without the extra .../index.ts line this import didn't work for me:

import { Logo } from 'component';  

Alias config in .babelrc.js:

plugins: [
[
    'module-resolver',
    {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        root: ['./src'],
        alias: {
        // this must be synchronized with tsconfig.json's path configuration
            component: './src/component',
        },
    },
],

Answer 4

As others have mentioned, you need to provide an alias in your webpack.config.js:

    resolve: { 

        extensions: [".ts", ".js"],
        alias: {
            forms: path.resolve(__dirname, "src/forms/")
        } 
    },

This needs to be in synch with your tsconfig.json file (baseUrl and paths are required).

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

Note: The wildcard pattern is necessary to match with your resolve alias configuration.

Then you can import any library using your alias:

import { FormsModule } from "forms/my-forms/my-forms.module";

Answer 5

I think you can do this and have it work the way you describe:

resolve: {
    root: [
        path.resolve(__dirname),
        <path_to_components_directory> //e.g. path.resolve(__dirname, 'src', 'components')
    ], 
    extensions: ["", ".ts", ".tsx", ".js"]
},

Then you can do import {Hello} from "Hello";

I know I do this to resolve file paths in my src/js directory. I am not using typescript though, but I don't think it would affect the result.

Answer 6

If anyone still have this issue, don't forget to add your folder to the "include" option on tsconfig.json like this:

{
  "compilerOptions": {
    "sourceMap": true,
    "allowJs": true,
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "outDir": "./built/",
  "include": [
    "./src/**/*",
    "./tests/**/*"
  ]
}