diff --git a/flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java b/flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java
index d52abb9fc1e..dbc1ca0b7c2 100644
--- a/flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java
+++ b/flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java
@@ -331,6 +331,7 @@ static Map<String, String> getDefaultDevDependencies() {
         defaults.put("html-webpack-plugin", "4.5.1");
         defaults.put("typescript", "4.2.3");
         defaults.put("ts-loader", "8.0.12");
+        defaults.put("fork-ts-checker-webpack-plugin", "6.2.1");
 
         defaults.put("webpack", "4.46.0");
         defaults.put("webpack-cli", "3.3.11");
diff --git a/flow-server/src/main/resources/webpack.generated.js b/flow-server/src/main/resources/webpack.generated.js
index 5f4ec32e261..21a0d308c1f 100644
--- a/flow-server/src/main/resources/webpack.generated.js
+++ b/flow-server/src/main/resources/webpack.generated.js
@@ -11,6 +11,7 @@ const { InjectManifest } = require('workbox-webpack-plugin');
 const { DefinePlugin } = require('webpack');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const ExtraWatchWebpackPlugin = require('extra-watch-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
 // Flow plugins
 const StatsPlugin = require('@vaadin/stats-plugin');
@@ -67,6 +68,8 @@ const themeProjectFolders = projectStaticAssetsFolders.map((folder) =>
   path.resolve(folder, 'themes')
 );
 
+const tsconfigJsonFile = path.resolve(__dirname, 'tsconfig.json');
+const enableTypeScript = fs.existsSync(tsconfigJsonFile);
 
 // Target flow-fronted auto generated to be the actual target folder
 const flowFrontendFolder = '[to-be-generated-by-flow]';
@@ -212,7 +215,7 @@ module.exports = {
       ...projectStaticAssetsFolders,
     ],
     extensions: [
-      useClientSideIndexFileForBootstrapping && '.ts',
+      enableTypeScript && '.ts',
       '.js'
     ].filter(Boolean),
     alias: {
@@ -243,9 +246,13 @@ module.exports = {
 
   module: {
     rules: [
-      useClientSideIndexFileForBootstrapping && {
+      enableTypeScript && {
         test: /\.ts$/,
-        loader: 'ts-loader'
+        loader: 'ts-loader',
+        options: {
+          transpileOnly: true,
+          experimentalWatchApi: true
+        }
       },
       {
         test: /\.css$/i,
@@ -342,5 +349,11 @@ module.exports = {
 
     // Generate compressed bundles when not devMode
     !devMode && new CompressionPlugin(),
+
+    enableTypeScript && new ForkTsCheckerWebpackPlugin({
+      typescript: {
+        configFile: tsconfigJsonFile
+      }
+    }),
   ].filter(Boolean)
 };