[SOLVED] Webpack is not failing on TypeScript error

Webpack is not failing on TypeScript error

Since I upgraded to version 5, webpack does not fail on a TypeScript error.

Here is my scenario:

index.ts (entry point):

const message: string = "Hello World";
console.log(message);

I run ./node_modules/.bin/webpack --config webpack.config.js --watch
Everything is fine. Here is webpack's output:

[webpack-cli] Compilation starting...
[webpack-cli] Compilation finished
asset index.js 50 bytes [compared for emit] [minimized] (name: main)
./src/index.ts 65 bytes [built] [code generated]
webpack 5.0.0 compiled successfully in 1251 ms
[webpack-cli] watching files for updates...
[webpack-cli] Compilation starting...
[webpack-cli] Compilation finished
asset index.js 50 bytes [emitted] [minimized] (name: main)
./src/index.ts 65 bytes [built] [code generated]
webpack 5.0.0 compiled successfully in 152 ms
[webpack-cli] watching files for updates...

In the next step I add a code snippet which should lead to a TypeScript error:

const message: number = "Hello World"; // <= Type 'string' is not assignable to type 'number'.ts(2322)
console.log(message);

I expect the webpack watch process to fail or show some errors but it doesn't fail. Here is what webpack outputs:

[webpack-cli] Compilation starting...
[webpack-cli] Compilation finished
asset index.js 50 bytes [emitted] [minimized] (name: main)
./src/index.ts 65 bytes [built] [code generated]
webpack 5.0.0 compiled successfully in 244 ms
[webpack-cli] watching files for updates...

Interesting is that this only happens when I change index.ts after starting the webpack watch process. If I run webpack without the --watch option I get this output and no bundled files will be created (as expected):

[webpack-cli] Compilation finished
assets by status 50 bytes [cached] 1 asset
./src/index.ts 65 bytes [built] [code generated] [1 error]

ERROR in /Users/oliverschwendener/projects/test/src/index.ts
./src/index.ts
[tsl] ERROR in /Users/oliverschwendener/projects/test/src/index.ts(1,7)
      TS2322: Type 'string' is not assignable to type 'number'.

webpack.config.js:

const path = require('path');

const config = {
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ],
    },
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'bundle'),
    },
};

module.exports = config;

*edit: here is my tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "lib": ["dom", "es2017"],
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUnusedLocals": true,
    "moduleResolution": "node"
  }
}

I can't imagine that this is a bug in webpack, webpack-cli or ts-loader. So I guess something's wrong with my configuration. Can anyone tell me what's wrong here? Thanks!

webpack 5.3.1 (Everything works fine with webpack version 4.44.2)
webpack-cli 4.1.0
ts-loader 8.0.7
typescript 4.0.5

Solution