formatter fixes

packages/react-dev-utils/WebpackDevServerUtils.js

@@ -146,12 +146,13 @@ function createCompiler({
       });
     });
 
+    const formatter = typescriptFormatter(appPath.replace(/\\/g, '/'));
     forkTsCheckerWebpackPlugin
       .getCompilerHooks(compiler)
       .receive.tap('afterTypeScriptCheck', (diagnostics, lints) => {
         const allMsgs = [...diagnostics, ...lints];
         const format = message =>
-          `${message.file}\n${typescriptFormatter(message, true)}`;
+          `${message.file}\n${formatter(message, true)}`;
 
         tsMessagesResolver({
           errors: allMsgs.filter(msg => msg.severity === 'error').map(format),

packages/react-dev-utils/typescriptFormatter.js

@@ -14,62 +14,50 @@ const fs = require('fs');
 
 function makeFormatter(appPath) {
   const pathToExclude = appPath + '/';
+  const types = { diagnostic: 'TypeScript', lint: 'TSLint' };
+
   return function formatter(message, useColors) {
-    const hasGetters = typeof message.getFile === 'function';
+    const { type, severity, file, line, content, code, character } =
+      typeof message.getFile === 'function'
+        ? {
+            type: message.getType(),
+            severity: message.getSeverity(),
+            file: message.getFile(),
+            line: message.getLine(),
+            content: message.getContent(),
+            code: message.getCode(),
+            character: message.getCharacter(),
+          }
+        : message;
+
     const colors = new chalk.constructor({ enabled: useColors });
     const messageColor = message.isWarningSeverity()
       ? colors.yellow
       : colors.red;
     const fileAndNumberColor = colors.bold.cyan;
 
-    let source;
-
-    if (hasGetters) {
-      source =
-        message.getFile() &&
-        fs.existsSync(message.getFile()) &&
-        fs.readFileSync(message.getFile(), 'utf-8');
-    } else {
-      source =
-        message.file &&
-        fs.existsSync(message.file) &&
-        fs.readFileSync(message.file, 'utf-8');
-    }
-
-    let frame = '';
-
-    if (source) {
-      frame = codeFrame(
-        source,
-        { start: { line: message.line, column: message.character } },
-        { highlightCode: useColors }
-      )
-        .split('\n')
-        .map(str => '  ' + str)
-        .join(os.EOL);
-    }
-
-    const severity = hasGetters ? message.getSeverity() : message.severity;
-    const types = { diagnostic: 'TypeScript', lint: 'TSLint' };
+    const source =
+      file && fs.existsSync(file) && fs.readFileSync(file, 'utf-8');
+    const frame = source
+      ? codeFrame(
+          source,
+          { start: { line: line, column: character } },
+          { highlightCode: useColors }
+        )
+          .split('\n')
+          .map(str => '  ' + str)
+          .join(os.EOL)
+      : '';
 
     return [
-      messageColor.bold(
-        `${types[message.type]} ${severity.toLowerCase()} in `
-      ) +
+      messageColor.bold(`${types[type]} ${severity.toLowerCase()} in `) +
         fileAndNumberColor(
-          `${message
-            .getFile()
-            .replace(
-              pathToExclude,
-              ''
-            )}(${message.getLine()},${message.getCharacter()})`
+          `${file.replace(pathToExclude, '')}(${line},${character})`
         ) +
         messageColor(':'),
-      (hasGetters ? message.getContent() : message.content) +
+      content +
         '  ' +
-        messageColor.underline(
-          (message.type === 'lint' ? 'Rule: ' : 'TS') + message.code
-        ),
+        messageColor.underline((type === 'lint' ? 'Rule: ' : 'TS') + code),
       '',
       frame,
     ].join(os.EOL);

packages/react-scripts/config/webpack.config.js

@@ -632,7 +632,9 @@ module.exports = function(webpackEnv) {
           watch: paths.appSrc,
           silent: true,
           // The formatter is invoked directly in WebpackDevServerUtils during development
-          formatter: isEnvProduction ? typescriptFormatter : undefined,
+          formatter: isEnvProduction
+            ? typescriptFormatter(paths.appPath.replace(/\\/g, '/'))
+            : undefined,
         }),
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.