Fork TS Checker

Added Type Checking for Typescript files at build time

Author: tushar1998

package.json

@@ -49,11 +49,9 @@
     "react-dom": "^17.0.2",
     "styled-components": "^5.3.0",
     "terser-webpack-plugin": "^5.2.4",
-    "ts-loader": "^9.2.5",
     "typescript": "^4.2.4",
     "webpack": "^5.52.1",
-    "webpack-cli": "^4.7.0",
-    "webpack-merge": "^5.7.3"
+    "webpack-cli": "^4.7.0"
   },
   "devDependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
@@ -99,9 +97,7 @@
     "ts-jest": "^27.0.5",
     "ts-node": "^10.2.1",
     "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-dev-server": "^4.2.0"
-  },
-  "peerDependencies": {
-    "react-is": "16.8.0"
+    "webpack-dev-server": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^6.3.3"
   }
 }

src/stories/Counter.stories.tsx

@@ -1,6 +1,7 @@
 // YourComponent.stories.js
 import { Story } from '@storybook/react';
 import Counter from 'components/Counter';
+import React from 'react';
 
 // This default export determines where your story goes in the story list
 export default {

webpack.config.ts

@@ -7,6 +7,7 @@ import DotEnvWebpackPlugin from 'dotenv-webpack';
 import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 
 export default ({ env }: { env: string }) => {
   const isEnvDevelopment = env === 'development';
@@ -44,12 +45,23 @@ export default ({ env }: { env: string }) => {
     ],
   });
 
+  const ForkTS = new ForkTsCheckerWebpackPlugin({
+    async: isEnvDevelopment,
+    typescript: {
+      enabled: true,
+      configFile: path.join(__dirname, 'tsconfig.json'),
+      mode: 'write-references',
+    },
+    logger: { infrastructure: 'webpack-infrastructure', issues: 'console', devServer: true },
+  });
+
   return {
     target: 'web',
     mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
     bail: isEnvProduction,
     entry: { main: path.join(__dirname, 'src', 'index.tsx'), vendor: ['react', 'react-dom'] },
     devtool: isEnvProduction ? 'source-map' : isEnvDevelopment && 'cheap-module-source-map',
+    stats: isEnvDevelopment ? 'minimal' : isEnvProduction && 'normal',
     output: {
       clean: true,
       path: path.join(__dirname, 'build'),
@@ -126,6 +138,7 @@ export default ({ env }: { env: string }) => {
       Copy,
       isEnvProduction && MiniCss,
       isEnvDevelopment && ReactRefresh,
+      isEnvDevelopment && ForkTS,
     ].filter(Boolean),
   } as Configuration;
 };

yarn.lock

@@ -7551,7 +7551,7 @@ enhanced-resolve@^4.5.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
-enhanced-resolve@^5.0.0, enhanced-resolve@^5.8.0:
+enhanced-resolve@^5.8.0:
   version "5.8.2"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.8.2.tgz#15ddc779345cbb73e97c611cd00c01c1e7bf4d8b"
   integrity sha512-F27oB3WuHDzvR2DOGNTaYy0D5o0cnrv8TeI482VM4kYgQd/FT9lUQwuNsJ0oOHtBUq7eiW5ytqzp7nBFknL+GA==
@@ -8581,7 +8581,7 @@ fork-ts-checker-webpack-plugin@4.1.6, fork-ts-checker-webpack-plugin@^4.1.6:
     tapable "^1.0.0"
     worker-rpc "^0.1.0"
 
-fork-ts-checker-webpack-plugin@^6.0.4:
+fork-ts-checker-webpack-plugin@^6.0.4, fork-ts-checker-webpack-plugin@^6.3.3:
   version "6.3.3"
   resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.3.3.tgz#73a9d8e1dc5821fa19a3daedc8be7568b095c8ab"
   integrity sha512-S3uMSg8IsIvs0H6VAfojtbf6RcnEXxEpDMT2Q41M2l0m20JO8eA1t4cCJybvrasC8SvvPEtK4B8ztxxfLljhNg==
@@ -11916,7 +11916,7 @@ micromatch@^3.1.10, micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
-micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4:
+micromatch@^4.0.2, micromatch@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
   integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
@@ -16078,16 +16078,6 @@ ts-jest@^27.0.5:
     semver "7.x"
     yargs-parser "20.x"
 
-ts-loader@^9.2.5:
-  version "9.2.5"
-  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-9.2.5.tgz#127733a5e9243bf6dafcb8aa3b8a266d8041dca9"
-  integrity sha512-al/ATFEffybdRMUIr5zMEWQdVnCGMUA9d3fXJ8dBVvBlzytPvIszoG9kZoR+94k6/i293RnVOXwMaWbXhNy9pQ==
-  dependencies:
-    chalk "^4.1.0"
-    enhanced-resolve "^5.0.0"
-    micromatch "^4.0.0"
-    semver "^7.3.4"
-
 ts-node@^10.2.1:
   version "10.2.1"
   resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.2.1.tgz#4cc93bea0a7aba2179497e65bb08ddfc198b3ab5"