Webpack unable to resolve JS module (in Typescript project)

Question

I'm having a problem using a 3th party library in combination with Typescript, custom typings and Webpack. Webpack is unable to resolve the 3th party JS library.

Whenever I manually compile my .ts file and run it with Node.js it compiles without any problems and executes as expected. However, when I run Webpack it exits with an error:

ERROR in ./index.ts
Module not found: Error: Can't resolve '@slack/client' in 'Z:\reproduction'
@ ./index.ts 1:0-45

My first hunch was that it had something to do with the scoped package (@slack/client). I tried working with aliases combined with path mapping in tsconfig for this package but this didn't resolve the problem. Also, copying the package directly to ./node_modules and removing the scoped part from the definition file and the imports did not fix it.

I managed to reproduce the problem in a small project. I added two dependencies to this reproduction project: " @slack/client " (the unresolvable lib) and " abs " (as a sanity check). For both I created small .d.ts definition files. The abs lib is working flawlessly, but the @slack/client remains unresolvable for Webpack.

I'm quite new to Typescript and Webpack, so I suspect I'm overlooking something obvious. I just can't figure out what. The good thing is though, trying to resolve this problem already thought me a lot about Webpack and Typescript :-)

Can anybody point me in the right direction?

I managed to reproduce it with the following files:

package.json

{
    "devDependencies": {
        "awesome-typescript-loader": "^3.0.0-beta.18",
        "typescript": "^2.1.5"
    },
    "dependencies": {
        "@slack/client": "^3.8.1",
        "abs": "^1.3.6"
    }
}

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": true,
        "sourceMap": false
    }
}

webpack.config.js

module.exports = {
  entry: './index.ts',
  target: 'node',
  module: {
    loaders: [
      { 
        test: /\.ts(x?)$/, 
        loader: 'awesome-typescript-loader' 
      }
    ]
  },
  resolve: {
    extensions: ['.ts'],
  },
  output: {
    libraryTarget: 'commonjs',
    path: './',
    filename: 'index.js'
  }
}

abs.d.ts

declare module 'abs' {
  function abs(input: any): any;
  namespace abs {}
  export = abs;
}

@slack_client.d.ts

declare module '@slack/client' {
    export const CLIENT_EVENTS: {
        RTM: {
            ATTEMPTING_RECONNECT: string;
        };
    };
}

index.ts

import * as slackClient from '@slack/client';
import * as abs from 'abs';

var absPath: string = abs('./');
console.log(absPath);

var added: string = slackClient.CLIENT_EVENTS.RTM.ATTEMPTING_RECONNECT;
console.log(added);

Notes

• The definition file for @slack/client might look a bit odd with with the @ in the name. I experimented with changing it for both definitions, this didn't do much. Abs kept working, @slack/client kept failing.
• Webpack version: 2.2.1
• Typescript version: 2.1.5

Answer 1

I suspect that this line:

extensions: ['.ts']

needs to be:

extensions: ['.js', '.ts']

or even better:

extensions: ['.js', '.ts', '.tsx']

to capture most cases.