fix issues with async type checking

Author: mikew

packages/react-dev-utils/WebpackDevServerUtils.js

@@ -108,7 +108,7 @@ function createCompiler(
   urls,
   useYarn,
   useTypeScript,
-  devSocket
+  devSocketWrite
 ) {
   // "Compiler" is a low-level interface to Webpack.
   // It lets us listen to some events and provide our own custom messages.
@@ -140,6 +140,9 @@ function createCompiler(
 
   if (useTypeScript) {
     compiler.hooks.beforeCompile.tap('beforeCompile', () => {
+      if (!isFirstCompile) {
+        devSocketWrite('wait-for-types', true);
+      }
       tsMessagesPromise = new Promise(resolve => {
         tsMessagesResolver = msgs => resolve(msgs);
       });
@@ -164,52 +167,55 @@ function createCompiler(
   // "done" event fires when Webpack has finished recompiling the bundle.
   // Whether or not you have warnings or errors, you will get this event.
   compiler.hooks.done.tap('done', async stats => {
-    if (isInteractive) {
-      clearConsole();
+    if (useTypeScript) {
+      if (isInteractive) {
+        clearConsole();
+      }
+
+      console.log(
+        chalk.yellow(
+          'Files successfully emitted, waiting for typecheck results...'
+        )
+      );
     }
 
     // We have switched off the default Webpack output in WebpackDevServer
     // options so we are going to "massage" the warnings and errors and present
     // them in a readable focused way.
     // We only construct the warnings and errors for speed:
     // https://github.com/facebook/create-react-app/issues/4492#issuecomment-421959548
-    const statsData = stats.toJson({
-      all: false,
-      warnings: true,
-      errors: true,
-    });
-
-    if (useTypeScript && statsData.errors.length === 0) {
-      const delayedMsg = setTimeout(() => {
-        console.log(
-          chalk.yellow(
-            'Files successfully emitted, waiting for typecheck results...'
-          )
-        );
-      }, 100);
+    const messages = formatWebpackMessages(
+      stats.toJson({ all: false, warnings: true, errors: true })
+    );
 
-      const messages = await tsMessagesPromise;
-      clearTimeout(delayedMsg);
-      statsData.errors.push(...messages.errors);
-      statsData.warnings.push(...messages.warnings);
+    if (useTypeScript) {
+      const asyncMessages = await tsMessagesPromise;
 
       // Push errors and warnings into compilation result
       // to show them after page refresh triggered by user.
-      stats.compilation.errors.push(...messages.errors);
-      stats.compilation.warnings.push(...messages.warnings);
+      // This is important for errors on first run in development.
+      stats.compilation.errors.push(...asyncMessages.errors);
+      stats.compilation.warnings.push(...asyncMessages.warnings);
 
-      if (messages.errors.length > 0) {
-        devSocket.errors(messages.errors);
-      } else if (messages.warnings.length > 0) {
-        devSocket.warnings(messages.warnings);
-      }
+      messages.errors.push(...asyncMessages.errors);
+      messages.warnings.push(...asyncMessages.warnings);
 
-      if (isInteractive) {
-        clearConsole();
+      if (asyncMessages.errors.length > 0) {
+        devSocketWrite('errors', asyncMessages.errors);
+      } else if (asyncMessages.warnings.length > 0) {
+        devSocketWrite('warnings', asyncMessages.warnings);
+      } else {
+        // We have to notify the hot dev client when we are waiting for types
+        // when `module.hot` is being used.
+        devSocketWrite('wait-for-types', false);
+        devSocketWrite('ok');
       }
     }
 
-    const messages = formatWebpackMessages(statsData);
+    if (useTypeScript && isInteractive) {
+      clearConsole();
+    }
+
     const isSuccessful = !messages.errors.length && !messages.warnings.length;
     if (isSuccessful) {
       console.log(chalk.green('Compiled successfully!'));

packages/react-dev-utils/webpackHotDevClient.js

@@ -83,6 +83,7 @@ connection.onclose = function() {
 var isFirstCompilation = true;
 var mostRecentCompilationHash = null;
 var hasCompileErrors = false;
+var isWaitingForTypes = false;
 
 function clearOutdatedErrors() {
   // Clean up outdated compile errors, if any.
@@ -203,6 +204,9 @@ connection.onmessage = function(e) {
     case 'warnings':
       handleWarnings(message.data);
       break;
+    case 'wait-for-types':
+      isWaitingForTypes = message.data;
+      break;
     case 'errors':
       handleErrors(message.data);
       break;
@@ -221,7 +225,7 @@ function isUpdateAvailable() {
 
 // Webpack disallows updates in other states.
 function canApplyUpdates() {
-  return module.hot.status() === 'idle';
+  return module.hot.status() === 'idle' && !isWaitingForTypes;
 }
 
 // Attempt to update code on the fly, fall back to a hard reload.

packages/react-scripts/scripts/start.js

@@ -96,11 +96,8 @@ checkBrowsers(paths.appPath, isInteractive)
     const appName = require(paths.appPackageJson).name;
     const useTypeScript = fs.existsSync(paths.appTsConfig);
     const urls = prepareUrls(protocol, HOST, port);
-    const devSocket = {
-      warnings: warnings =>
-        devServer.sockWrite(devServer.sockets, 'warnings', warnings),
-      errors: errors =>
-        devServer.sockWrite(devServer.sockets, 'errors', errors),
+    const devSocketWrite = (type, data) => {
+      devServer.sockWrite(devServer.sockets, type, data);
     };
     // Create a webpack compiler that is configured with custom messages.
     const compiler = createCompiler(
@@ -110,7 +107,7 @@ checkBrowsers(paths.appPath, isInteractive)
       urls,
       useYarn,
       useTypeScript,
-      devSocket
+      devSocketWrite
     );
     // Load proxy config
     const proxySetting = require(paths.appPackageJson).proxy;