Webpacker: How to do TypeScript type checking in 5.1+?

[hueter]

Hello,

I have a TypeScript project and recently followed the upgrade instructions since TS compilation is now babel instead of ts-loader.

However, I was also using ts-loader for type checking during the webpack compilation. In the previous setup, the compiler wouldn't succeed if there was a TypeScript error.

I am wondering how can I get that functionality with the new setup?

Thank you

[hueter]

Update -- I think I was able to get it to work with the fork-ts-checker-webpack-plugin via this helpful issue

I would recommend adding this optional step to the TypeScript install / upgrade guide to enable type checking during webpack compilation:

yarn install -D fork-ts-checker-webpack-plugin

then config/webpack/development.js

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

environment.plugins.append(
  "ForkTsCheckerWebpackPlugin",
  new ForkTsCheckerWebpackPlugin({
    tsconfig: path.resolve(__dirname, "../../tsconfig.json"),
    async: false,
  })
);

[connorshea]

Oh hey, I'm glad that issue is still helpful to people :D

[seuros]

yarn install -D fork-ts-checker-webpack-plugin

you meant yarn add -D fork-ts-checker-webpack-plugin

btw no need to set tsconfig. it will select the tsconfig of the project root folder.

[snkashis]

Are there any specific vue instructions/flags we need to flip for this to operate in 5.1+? because the vue option in this plugin doesnt seem do the job. I followed the upgrade instructions listed, but tsc --listfiles --noEmit does not pick up any of my .vue SFCs

[somodevo]

@snkashis I had the same issue. I found out that you need to change your ForkTsCheckerWebpackPlugin configuration depending on the Vue version you are using to support TypeScript support in SFCs with webpacker >=5.1.

For Vue 3:

new ForkTsCheckerWebpackPlugin({
  typescript: {
    configFile: path.resolve(__dirname, "../../tsconfig.json"),
    extensions: {
      vue: {
        enabled: true,
        compiler: '@vue/compiler-sfc'
      }
    }
  },
  async: false,
})

For Vue 2:

new ForkTsCheckerWebpackPlugin({
  typescript: {
    configFile: path.resolve(__dirname, "../../tsconfig.json"),
    extensions: {
      vue: true
    }
  },
  async: false,
})

I guess a documentation update would be nice 🤔 I had some trouble updating to webpacker 5.1 in a Vue 3 with SFCs + TypeScript setup. Took me some time to find the instructions in the typescript.md after looking for a v5-upgrade.md (because v4-upgrade.md exists)

Question to the maintainers: Any thoughts on this? How should a PR look?