Webpack cant resolve TypeScript modules

Question

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>

Thanks for including all the files in your question; without these, I would not have understood some answers (and that my own project was missing a webpack config ':D). — RobertG, Jun 21 '22 at 15:24

score 187 · Accepted Answer · answered Apr 24 '17 at 19:59

187

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']
}

answered Apr 24 '17 at 19:59

Michael Jungo

31,583
3
91
84

10

And check for typos - in my case I added ts and tsx but had forgotten the dot at the beginning of `.tsx` – Matt Browne Jun 01 '20 at 12:31

score 57 · Answer 2 · answered Apr 07 '18 at 14:37

57

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...

answered Apr 07 '18 at 14:37

Jonathan

32,202
38
137
208

10

"Don't know why this is necessary, and to be quite honest, I'm beyond caring at this point..." thank you for that, my sentiments exactly :-). – AntonOfTheWoods Sep 23 '21 at 04:56
1

Didn't make a difference for me. – alekop Apr 29 '22 at 22:25
1

Thank you man, I can't believe it was such an arbitrary thing stopping it from working. Can't express the frustration this issue has given me today so thank you for adding this answer. – Stu Horsfield Aug 02 '22 at 05:54

score 15 · Answer 3 · answered Mar 27 '18 at 21:55

15

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'

to

entry: './entry.ts'

answered Mar 27 '18 at 21:55

Dana Woodman

4,148
1
38
35

2

I am on webpack 4.31.0 and this was the solution! I have the resolve..extensions... '.ts' part as well, so I could even specify `entry: './entry'` – Dimitry K May 09 '19 at 18:03
In webpack 4.41.5 I solved the error in just the opposite way, went from relative entry to absolute. – Chris Panayotoff Jan 12 '20 at 14:48

score 6 · Answer 4 · answered Feb 18 '22 at 19:57

6

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

answered Feb 18 '22 at 19:57

Lucas Noetzold

1,670
1
13
29

score 1 · Answer 5 · answered Nov 12 '19 at 16:24

1

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.

answered Nov 12 '19 at 16:24

Nic Scozzaro

6,651
3
42
46

score 1 · Answer 6 · answered Aug 06 '23 at 22:32

1

In my case, the issue is fixed by

import Foo from "../Foo.ts";

Instead of

import Foo from "../Foo";

answered Aug 06 '23 at 22:32

DYS

2,826
2
23
34

score 0 · Answer 7 · answered Jul 05 '23 at 18:51

0

For me, the issue was that I needed to upgrade node and npm.

answered Jul 05 '23 at 18:51

coberlin

508
5
7

Webpack cant resolve TypeScript modules

7 Answers7

Linked

Related