Webpack cant resolve TypeScript modules

P

8

93

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>

Pewter answered 24/4, 2017 at 18:45 Comment(0)

T

190

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

Troopship answered 24/4, 2017 at 19:59 Comment(1)

And check for typos - in my case I added ts and tsx but had forgotten the dot at the beginning of .tsx – Poulard 1/6, 2020 at 12:31

C

60

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

Cassirer answered 7/4, 2018 at 14:37 Comment(3)

"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 :-). – Subpoena 23/9, 2021 at 4:56

Didn't make a difference for me. – Wallas 29/4, 2022 at 22:25

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. – Treenware 2/8, 2022 at 5:54

B

16

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'

Bachelorism answered 27/3, 2018 at 21:55 Comment(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' – Commonly 9/5, 2019 at 18:3

In webpack 4.41.5 I solved the error in just the opposite way, went from relative entry to absolute. – Expectoration 12/1, 2020 at 14:48

P

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

Piccard answered 18/2, 2022 at 19:57 Comment(0)

W

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.

Westminster answered 12/11, 2019 at 16:24 Comment(0)

U

1

In my case, the issue is fixed by

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

Instead of

import Foo from "../Foo";

Uric answered 6/8, 2023 at 22:32 Comment(0)

T

0

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

Tersina answered 5/7, 2023 at 18:51 Comment(0)

M

0

Make sure you have tsconfig.json in the same root directory as your webpack.config.js as well.

I had my tsconfig in the root directory so I could share it between my client and server folder, but it needed to be in the client folder where webpack.config.js was.

Mcniel answered 14/2 at 4:50 Comment(0)

Recommended topics

Hot tags