javascripttypescriptwebpackts-loader

Webpack cant resolve TypeScript modules

I build a relay small webpack and typescript demo to play with. If i run webpack with the webpack.config.js i get this error:

ERROR in ./js/app.ts
Module not found: Error: Can't resolve './MyModule' in '/Users/timo/Documents/Dev/Web/02_Tests/webpack_test/js'
 @ ./js/app.ts 3:17-38

I have no clue what the problem could be. The module export should be correct.

Folder Structure

webpack.config.js 

const path = require('path');

module.exports = {
    entry: './js/app.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {test: /\.ts$/, use: 'ts-loader'}
        ]
    }
};

tsconfig.json 

{
  "compilerOptions": {
        "target": "es5",
        "suppressImplicitAnyIndexErrors": true,
        "strictNullChecks": false,
        "lib": [
            "es5", "es2015.core", "dom"
        ],
        "module": "commonjs",
        "moduleResolution": "node",
        "outDir": "dist"
    },
    "include": [
        "js/**/*"
    ]
}

src/app.js 

import { MyModule } from './MyModule';

let mym = new MyModule();
console.log('Demo');

mym.createTool();
console.log(mym.demoTool(3,4));

src/MyModule.ts

export class MyModule {
   createTool() {
    console.log("Test 123");
  }

   demoTool(x:number ,y:number) {
    return x+y;
  }
};

src/index.html

<html>
    <head>
        <title>Demo</title>
        <base href="/">
    </head>
    <body>
        
        <script src="dist/bundle.js"></script>
    </body>
</html>

Solution

  • Webpack does not look for .ts files by default. You can configure resolve.extensions to look for .ts. Don't forget to add the default values as well, otherwise most modules will break because they rely on the fact that the .js extension is automatically used.

    resolve: {
    extensions: ['.ts', '.js', '.json']
}