ts-loader ignores resolve.extensions order

[davismj]

Motivation

I have a monorepo structure where I have separate processes building separate and differently configured typescript applications concurrently. Since application A is configured differently from application B, trying to build application B with application A configuration yields numerous errors. Instead, I want application A to load and transpile its own TypeScript files, but I want application A to load the built JavaScript files and ignore the source TypeScript from application B.

Expected Behaviour

Using the following webpack configuration:

resolve: {
  extensions: ['.js', '.ts']
},
 module: {{
  test: /\.ts$/,
  loader: 'ts-loader'
}]

I would expect that the following code would resolve test.js and ignore test.ts from main.ts.

main.ts

import { thing } from 'test';

Actual Behaviour

Using the above configuration, ts-loader loads test.ts and ignores test.js. To verify, I dropped a deliberate typing error in 'test.ts', leaving the old and working 'test.js' in tact.

const a: number = 'a';

Which yields an error on build:

[tsl] ERROR in C:\Users\user\source\test.ts(1,32)
      TS2322: Type '"a"' is not assignable to type 'number'.

Steps to Reproduce the Problem

• Configure Webpack with resolve.extensions = ['.js', '.ts']
• Build application B
• Introduce a type error into a file in application B. The built application B should remain in tact.
• Load the file with the introduced error in application A via import.
• Observe tsl yields an error.

Location of a Minimal Repository that Demonstrates the Issue.

On request.

[appzuka]

@davismj, I would be happy to look at a minimal repo which demonstrates the issue but I have the following comments which may be helpful.

I believe that resolve.extensions is part of webpack and is not used by ts-loader. webpack uses resolve.extensions to resolve files and then passes the file it resolved to ts-loader (if it is a .ts file).

Typescript has a separate module resolution system, which is described at

https://www.typescriptlang.org/docs/handbook/module-resolution.html

You can control TypeScript's module resolution using tsconfig.json. It is possible that Typescript and webpack will resolve files differently. You have use a plugin (tsconfig-paths-webpack-plugin) to get webpack to mirror the paths in tsconfig.json, which helps to keep them in sync.

If I understand your need correctly I would configure application B to output its .js files to directory 'build_b' then I would configure the tsconfig.json for application A to resolve files from the 'build_b' directory. In this case it should resolve the built .js files instead of the source .ts files. If you output the .js files to the same directory as the source .ts files you will find it hard to resolve them apart.

If you need further help I would be pleased to look at a minimal repo.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

Closing as stale. Please reopen if you'd like to work on this further.