'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 1:^[1]

Tried all the suggestions above and it still didn't work.

Ended up being the tiniest detail:

In webpack.js, instead of:

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

The ordering should be:

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

Don't know why this is necessary, and to be quite honest, I'm beyond caring at this point...

Solution 2:^[2]

Leaving this here for posterity, but I had this exact same issue and my problem was that my entry path was not relative but absolute. I changed entry from:

entry: 'entry.ts'

entry: './entry.ts'

Solution 3:^[3]

I'm a bit late to the party, but is better to use:

resolve: {
    extensions: ['.jsx', '.ts', '.tsx', '...']
}

... means that we'll not overwrite the default, only add to it

Solution 4:^[4]

I'm using tsconfig instead of webpack which also compiles the submodule to a bundle (index.js).

The issue for me was that I had forgotten to compile the submodule (ie run tsc to generate index.js) before referencing it from outside.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Jonathan
Solution 2	Dana Woodman
Solution 3	Lucas Noetzold
Solution 4	Nic Scozzaro

'Webpack cant resolve TypeScript modules

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]