Solvedts loader ts-loader breaking when it's used with TS Path mappings based module resolution

I'm using Path Mapping based Module resolution feature of TypeScript 2.0 and ts-loader failing with 'can not resolve module' error.

To repro the issue, please follow the following steps:

  • clone my sample
  • npm install
  • in tsconfig.json, change the baseUrl to the local location of the clone.
  • webpack

You will get the following error:

ERROR in ./src/utility/utility.ts
Module not found: Error: Cannot resolve module 'stringExtensions' in d:\tsLoaderFailingWithModuleNodeResolution\sample\src\utility

It's working fine when I'm running the following command:
tsc -p tsconfig.json

30 Answers

✔️Accepted Answer

Is it possible for ts-loader to get my information from paths in tsconfig.json and set them up as resolve.alias entries?

At the moment I have to duplicate my config between tsconfig.json and webpack.config.js, like so:

    "paths": {
      "~data/*": [ "Scripts/data/*" ] 
    } 
    resolve: {
        alias: {
            "~data": path.resolve(__dirname, "./Scripts/data/")
        }
    },

Other Answers:

+1, would be nice if ts-loader would be able to automatically parse the paths/baseUrl properties from tsconfig.js. Took me a while to figure out that the problem was that I wasn't including the paths in resolve, and not with my tsconfig.js configuration.

@johnnyreilly I can confirm that the solution from the post above works great for me:

I have the following code:

webpack.config.js:

const {TsConfigPathsPlugin} = require('awesome-typescript-loader');

resolve: {
  plugins: [
    new TsConfigPathsPlugin()
  ]
}

tsconfig.json:

"baseUrl": ".",
"paths": {
  "shared-services/*": ["./app/shared/services/*"]
}

@Merott,

I don't suppose you could try something for me could you? Would you be able to add awesome-typescript-loader as a dev dependency of your project and follow the instructions here for using the Path's plugin. I'm guessing your code would look something like this:

const { TsConfigPathsPlugin } = require('awesome-typescript-loader');

resolve: {
    plugins: [
        new TsConfigPathsPlugin( ... )
    ]
}

If that works I wonder if they'd be up for publishing this as a standalone package that could be used by ts-loader and awesome-typescript-loader alike?

You could also use the tsconfig-paths-webpack-plugin package together with ts-loader in order to resolve baseUrl and paths from tsconfig.json. This is now mentioned here in the readme so I guess this can be closed?

More Issues: