Fork-ts-checker-webpack-plugin: Add example for new Babel 7 TypeScript Integration

Created on 21 Oct 2018 · 7Comments · Source: TypeStrong/fork-ts-checker-webpack-plugin

Babel 7 supports TypeScript without type checking, so basically it just strips all the types away and makes the code valid JS code. It still would be preferrable to do type checking with ts in a separate process during the build. It would ve nice if in the readme of this project there was an example on how to configure this correctly (if it is possible).

docs help wanted released released on @alpha released on @beta

Source

fabb

👍25

Most helpful comment

I do use babel 7's typesceript transpilation and this is my settings for development. For production, I run tsc --noEmit instead of using the plugin.

import ForkTSCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
// ...
export default () => {
  return {
    module: {
      rules: [
        {
          test: /\.(ts|tsx)$/,
          use: [
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-typescript',
              ]
            }
          ],
          exclude: /node_modules/,
        } 
      ],
      // ... other rules
    },
    plugins: [
      new ForkTSCheckerWebpackPlugin({
        checkSyntacticErrors: true,    
      }),
      // ... other plugins
    ]
  }
}

huy-nguyen on 6 Mar 2019

👍2

All 7 comments

I think the same pattern could be applied for linting along with AngularCompilerPlugin as well. I use ForkTsCheckerWebpackPlugin for non-Angular TypeScript files but I'm stuck.

antch on 21 Dec 2018

Does this plugin even work with Babel 7? webpack --watch doesn't work anymore when enabling this plugin.

kenjiru on 5 Mar 2019

I believe that create-react-app are using it - so could be worth ejecting one of their apps to get config.

johnnyreilly on 5 Mar 2019

I do use babel 7's typesceript transpilation and this is my settings for development. For production, I run tsc --noEmit instead of using the plugin.

import ForkTSCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
// ...
export default () => {
  return {
    module: {
      rules: [
        {
          test: /\.(ts|tsx)$/,
          use: [
            loader: 'babel-loader',
            options: {
              presets: [
                '@babel/preset-typescript',
              ]
            }
          ],
          exclude: /node_modules/,
        } 
      ],
      // ... other rules
    },
    plugins: [
      new ForkTSCheckerWebpackPlugin({
        checkSyntacticErrors: true,    
      }),
      // ... other plugins
    ]
  }
}

huy-nguyen on 6 Mar 2019

👍2

:tada: This issue has been resolved in version 5.0.0-alpha.11 :tada:

The release is available on:

Your semantic-release bot :package::rocket: