Fork-ts-checker-webpack-plugin: How to make this work with Rails' Webpacker?

[connorshea]

NOTE: This isn't actually an issue, I figured out how to do it myself. I just figured this might be useful to someone trying to do the same thing in the future. I'll close this issue right after opening it :)

Here's how you do this with Webpacker 4.x:

• Add the package to your package.json. Make sure to add it as a 'normal' dependency since we'll also want to use this in production.
• Add this to config/webpack/environment.js (you can remove the vue: true part if you're not using Vue):

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

environment.plugins.append(
  'ForkTsCheckerWebpackPlugin',
  new ForkTsCheckerWebpackPlugin({
    vue: true,

    // makes webpack wait for type checking to finish before "emitting"; allows
    // type errors to remain present in the build output from webpack and in
    // webpack-dev-server's darkened overlay
    async: false
  })
);

• Add transpileOnly: true to the options in config/webpack/loaders/typescript.js:

const PnpWebpackPlugin = require('pnp-webpack-plugin');

module.exports = {
  test: /\.(ts|tsx)?(\.erb)?$/,
  use: [
    {
      loader: 'ts-loader',
      options: PnpWebpackPlugin.tsLoaderOptions({
        appendTsSuffixTo: [/\.vue$/],

        // Using `fork-ts-checker-webpack-plugin` See:
        // https://github.com/TypeStrong/fork-ts-checker-webpack-plugin
        // to run type checking in a separate process, so `ts-loader` only does the
        // compilation work. See also:
        // https://github.com/TypeStrong/ts-loader#faster-builds
        transpileOnly: true
      })
    }
  ]
};

If you don't use Vue, the typescript.js file might look a bit different.

This package took my initial TypeScript compile time down from 60-80 seconds to 12-20 seconds, thank you! :D

[johnnyreilly]

Thanks for sharing! 🤗

[connorshea]

FYI this has changed somewhat and is now covered in the official docs (link is to 5.1, check the master branch of webpacker to make sure this is still relevant): https://github.com/rails/webpacker/blob/22ab02b7c84e917f985ecc76f5916d144f43bfbf/docs/typescript.md#optional-adding-compile-time-type-checking

So if you're on Webpacker 5.1+ you should use the official docs instead :)