@babel/typescript doesn't throw errors while webpack build

Question

I am trying to transpile TypeScript with Babel 7's @babel/typescript preset. It works fine but for some reason, there aren't any error messages from TS in the build console.

I have the next config:

webpack.config.js

const outputPath = require('path').resolve(__dirname, './production');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

  entry: [
    './src/index.tsx'
  ],

  output: {
    path: outputPath,
    filename: '[name].[chunkhash].js',
  },

  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'source-map-loader',
        enforce: "pre"
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loader: 'file-loader'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader'
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ],

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

  devServer: {
    contentBase: outputPath
  }
};

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/typescript",
    "@babel/preset-react"
  ],
  "plugins": [
    "react-hot-loader/babel",
    "@babel/plugin-transform-runtime",
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "outDir": "./production/",
    "sourceMap": true,
    "noImplicitAny": true,
    "lib": ["esnext", "dom"]
  },
  "include": [
    "./src/**/*"
  ]
}

And output is:

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/me/projects/react/production
ℹ ｢wdm｣: Hash: 1186927fe343142edc70
Version: webpack 4.29.3
Time: 1120ms
Built at: 2019-02-13 19:41:10
                       Asset       Size  Chunks             Chunk Names
                  index.html  433 bytes          [emitted]  
main.3bb79f4b9e2925734f50.js   1.64 MiB    main  [emitted]  main
Entrypoint main = main.3bb79f4b9e2925734f50.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.tsx 40 bytes {main} [built]
...
ℹ ｢wdm｣: Compiled successfully.

It says that there aren't any errors. But there are TS errors in the code.

If I change babel-loader to ts-loader, I will have:

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/me/projects/react/production
✖ ｢wdm｣: Hash: 90ec6ae13f842d672d2d
Version: webpack 4.29.3
Time: 1941ms
Built at: 2019-02-13 19:42:35
                       Asset       Size  Chunks             Chunk Names
                  index.html  433 bytes          [emitted]  
main.90f2073400581ecd9e5b.js   1.59 MiB    main  [emitted]  main
Entrypoint main = main.90f2073400581ecd9e5b.js

...

ERROR in /Users/me/projects/react/src/actions/index.ts
./src/actions/index.ts
[tsl] ERROR in /Users/me/projects/react/src/actions/index.ts(3,28)
      TS7006: Parameter 'type' implicitly has an 'any' type.

ERROR in /Users/me/projects/react/src/actions/index.ts
./src/actions/index.ts
[tsl] ERROR in /Users/me/projects/react/src/actions/index.ts(3,34)
      TS7019: Rest parameter 'argNames' implicitly has an 'any[]' type.

...

ℹ ｢wdm｣: Failed to compile.

So, ts-loader shows the errors.

How can I enable errors throwing for @babel/typescript?

Answer 1

As far as I understand, the Babel team disabled type checking while development:

https://iamturns.com/typescript-babel

How does Babel handle TypeScript code? It removes it.

Yep, it strips out all the TypeScript, turns it into “regular” JavaScript, and continues on its merry way.

But there is a workaround with fork-ts-checker-webpack-plugin

Just install it as a dependency

npm install --save-dev fork-ts-checker-webpack-plugin

And update your webpack config:

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const webpackConfig = {
  ...
  plugins: [
    new ForkTsCheckerWebpackPlugin()
  ]
};

After that, you will have static type checking running in a separate process, which is fantastic due to it speeds up you build dramatically.