build(webpack): Use fork-ts webpack plugin (#15587)

* run babel-loader + fork ts check when NOT in CI, otherwise use ts-loader for tsx files
* change tsconfig option for JSX to "preserve" so that we can use babel (and specifically emotion babel preset css plugin)

Author: billyvg

package.json

@@ -69,6 +69,7 @@
     "emotion-theming": "10.0.27",
     "file-loader": "^3.0.1",
     "focus-visible": "^5.0.2",
+    "fork-ts-checker-webpack-plugin": "^1.5.1",
     "fuse.js": "^3.4.6",
     "gettext-parser": "1.3.1",
     "intersection-observer": "^0.7.0",

tsconfig.json

@@ -26,7 +26,7 @@
     "experimentalDecorators": true,
 
     "esModuleInterop": true,
-    "jsx": "react",
+    "jsx": "preserve",
     "baseUrl": ".",
     "outDir": "src/sentry/static/sentry/dist",
     "paths": {

webpack.config.js

@@ -14,6 +14,7 @@ const CompressionPlugin = require('compression-webpack-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
 const CopyPlugin = require('copy-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 const babelConfig = require('./babel.config');
 
@@ -30,6 +31,7 @@ const SENTRY_WEBPACK_PROXY_PORT = env.SENTRY_WEBPACK_PROXY_PORT;
 const USE_HOT_MODULE_RELOAD =
   !IS_PRODUCTION && SENTRY_BACKEND_PORT && SENTRY_WEBPACK_PROXY_PORT;
 const NO_DEV_SERVER = env.NO_DEV_SERVER;
+const IS_CI = !!env.CI || !!env.TRAVIS;
 
 // Deploy previews are built using netlify. We can check if we're in netlifys
 // build process by checking the existence of the PULL_REQUEST env var.
@@ -183,6 +185,14 @@ const cacheGroups = {
 };
 
 const babelOptions = {...babelConfig, cacheDirectory: true};
+const babelLoaderConfig = {
+  loader: 'babel-loader',
+  options: babelOptions,
+};
+
+const tsLoaderConfig = {
+  loader: 'ts-loader',
+};
 
 /**
  * Main Webpack config for Sentry React SPA.
@@ -214,27 +224,15 @@ let appConfig = {
         test: /\.jsx?$/,
         include: [staticPrefix],
         exclude: /(vendor|node_modules|dist)/,
-        use: {
-          loader: 'babel-loader',
-          options: babelOptions,
-        },
+        use: babelLoaderConfig,
       },
       {
         test: /\.tsx?$/,
         include: [staticPrefix],
         exclude: /(vendor|node_modules|dist)/,
-        use: [
-          {
-            loader: 'babel-loader',
-            options: babelOptions,
-          },
-          {
-            loader: 'ts-loader',
-            options: {
-              transpileOnly: false,
-            },
-          },
-        ],
+        // Make sure we typecheck in CI, but not for local dev since that is run with
+        // the fork-ts plugin
+        use: !IS_CI ? babelLoaderConfig : [babelLoaderConfig, tsLoaderConfig],
       },
       {
         test: /\.po$/,
@@ -320,6 +318,14 @@ let appConfig = {
 
     new SentryInstrumentation(),
 
+    ...(!IS_CI
+      ? [
+          new ForkTsCheckerWebpackPlugin({
+            tsconfig: path.resolve(__dirname, './tsconfig.json'),
+          }),
+        ]
+      : []),
+
     ...localeRestrictionPlugins,
   ],
   resolve: {

yarn.lock

@@ -6749,6 +6749,20 @@ [email protected]:
     tapable "^1.0.0"
     worker-rpc "^0.1.0"
 
+fork-ts-checker-webpack-plugin@^1.5.1:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-1.6.0.tgz#a81fd1c6bf5258fa5318cf3e9a7e9bac006f7917"
+  integrity sha512-vqOY5gakcoon2s12V7MMe01OPwfgqulUWFzm+geQaPPOBKjW1I7aqqoBVlU0ECn97liMB0ECs16pRdIGe9qdRw==
+  dependencies:
+    babel-code-frame "^6.22.0"
+    chalk "^2.4.1"
+    chokidar "^2.0.4"
+    micromatch "^3.1.10"
+    minimatch "^3.0.4"
+    semver "^5.6.0"
+    tapable "^1.0.0"
+    worker-rpc "^0.1.0"
+
 form-data@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"