undo unpublished changes in CRA

packages/eslint-config-react-app/index.js

@@ -232,7 +232,7 @@ module.exports = {
 
     'react-hooks/rules-of-hooks': 'error',
     // https://github.com/facebook/react/issues/14920
-    // 'react-hooks/exhaustive-deps': 'warn',
+    'react-hooks/exhaustive-deps': 'warn',
 
     // https://github.com/evcohen/eslint-plugin-jsx-a11y/tree/master/docs/rules
     'jsx-a11y/accessible-emoji': 'warn',

packages/eslint-config-react-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bluealba/eslint-config-react-app",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "ESLint configuration used by Create React App",
   "repository": "facebook/create-react-app",
   "license": "MIT",

packages/react-dev-utils/README.md

@@ -325,7 +325,7 @@ printHostingInstructions(appPackage, publicUrl, publicPath, 'build', true);
 
 Returns a Promise resolving to either `defaultPort` or next available port if the user confirms it is okay to do. If the port is taken and the user has refused to use another port, or if the terminal is not interactive and can’t present user with the choice, resolves to `null`.
 
-##### `createCompiler(args: Object): WebpackCompiler`
+##### `createCompiler(webpack: Function, config: Object, appName: string, urls: Object, useYarn: boolean): WebpackCompiler`
 
 Creates a Webpack compiler instance for WebpackDevServer with built-in helpful messages.
 

packages/react-dev-utils/WebpackDevServerUtils.js

@@ -17,10 +17,22 @@ const inquirer = require('inquirer');
 const clearConsole = require('./clearConsole');
 const formatWebpackMessages = require('./formatWebpackMessages');
 const getProcessForPort = require('./getProcessForPort');
-const typescriptFormatter = require('./typescriptFormatter');
-const forkTsCheckerWebpackPlugin = require('./ForkTsCheckerWebpackPlugin');
 
 const isInteractive = process.stdout.isTTY;
+let handleCompile;
+
+// You can safely remove this after ejecting.
+// We only use this block for testing of Create React App itself:
+const isSmokeTest = process.argv.some(arg => arg.indexOf('--smoke-test') > -1);
+if (isSmokeTest) {
+  handleCompile = (err, stats) => {
+    if (err || stats.hasErrors() || stats.hasWarnings()) {
+      process.exit(1);
+    } else {
+      process.exit(0);
+    }
+  };
+}
 
 function prepareUrls(protocol, host, port) {
   const formatUrl = hostname =>
@@ -101,20 +113,12 @@ function printInstructions(appName, urls, useYarn) {
   console.log();
 }
 
-function createCompiler({
-  appName,
-  config,
-  devSocket,
-  urls,
-  useYarn,
-  useTypeScript,
-  webpack,
-}) {
+function createCompiler(webpack, config, appName, urls, useYarn) {
   // "Compiler" is a low-level interface to Webpack.
   // It lets us listen to some events and provide our own custom messages.
   let compiler;
   try {
-    compiler = webpack(config);
+    compiler = webpack(config, handleCompile);
   } catch (err) {
     console.log(chalk.red('Failed to compile.'));
     console.log();
@@ -135,35 +139,10 @@ function createCompiler({
   });
 
   let isFirstCompile = true;
-  let tsMessagesPromise;
-  let tsMessagesResolver;
-
-  if (useTypeScript) {
-    compiler.hooks.beforeCompile.tap('beforeCompile', () => {
-      tsMessagesPromise = new Promise(resolve => {
-        tsMessagesResolver = msgs => resolve(msgs);
-      });
-    });
-
-    forkTsCheckerWebpackPlugin
-      .getCompilerHooks(compiler)
-      .receive.tap('afterTypeScriptCheck', (diagnostics, lints) => {
-        const allMsgs = [...diagnostics, ...lints];
-        const format = message =>
-          `${message.file}\n${typescriptFormatter(message, true)}`;
-
-        tsMessagesResolver({
-          errors: allMsgs.filter(msg => msg.severity === 'error').map(format),
-          warnings: allMsgs
-            .filter(msg => msg.severity === 'warning')
-            .map(format),
-        });
-      });
-  }
 
   // "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 => {
+  compiler.hooks.done.tap('done', stats => {
     if (isInteractive) {
       clearConsole();
     }
@@ -173,43 +152,9 @@ function createCompiler({
     // 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 = await tsMessagesPromise;
-      clearTimeout(delayedMsg);
-      statsData.errors.push(...messages.errors);
-      statsData.warnings.push(...messages.warnings);
-
-      // 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);
-
-      if (messages.errors.length > 0) {
-        devSocket.errors(messages.errors);
-      } else if (messages.warnings.length > 0) {
-        devSocket.warnings(messages.warnings);
-      }
-
-      if (isInteractive) {
-        clearConsole();
-      }
-    }
-
-    const messages = formatWebpackMessages(statsData);
+    const messages = formatWebpackMessages(
+      stats.toJson({ all: false, warnings: true, errors: true })
+    );
     const isSuccessful = !messages.errors.length && !messages.warnings.length;
     if (isSuccessful) {
       console.log(chalk.green('Compiled successfully!'));
@@ -249,27 +194,6 @@ function createCompiler({
       );
     }
   });
-
-  // You can safely remove this after ejecting.
-  // We only use this block for testing of Create React App itself:
-  const isSmokeTest = process.argv.some(
-    arg => arg.indexOf('--smoke-test') > -1
-  );
-  if (isSmokeTest) {
-    compiler.hooks.failed.tap('smokeTest', async () => {
-      await tsMessagesPromise;
-      process.exit(1);
-    });
-    compiler.hooks.done.tap('smokeTest', async stats => {
-      await tsMessagesPromise;
-      if (stats.hasErrors() || stats.hasWarnings()) {
-        process.exit(1);
-      } else {
-        process.exit(0);
-      }
-    });
-  }
-
   return compiler;
 }
 

packages/react-dev-utils/package.json

@@ -8,7 +8,7 @@
     "url": "https://github.com/facebook/create-react-app/issues"
   },
   "engines": {
-    "node": ">=8.10"
+    "node": ">=6"
   },
   "files": [
     "browsersHelper.js",
@@ -20,7 +20,6 @@
     "eslintFormatter.js",
     "evalSourceMapMiddleware.js",
     "FileSizeReporter.js",
-    "ForkTsCheckerWebpackPlugin.js",
     "formatWebpackMessages.js",
     "getCacheIdentifier.js",
     "getCSSModuleLocalIdent.js",
@@ -55,7 +54,6 @@
     "escape-string-regexp": "1.0.5",
     "filesize": "3.6.1",
     "find-up": "3.0.0",
-    "fork-ts-checker-webpack-plugin": "1.0.0-alpha.6",
     "global-modules": "2.0.0",
     "globby": "8.0.2",
     "gzip-size": "5.0.0",

packages/react-dev-utils/typescriptFormatter.js

@@ -45,15 +45,12 @@ function formatter(message, useColors) {
   }
 
   const severity = hasGetters ? message.getSeverity() : message.severity;
-  const types = { diagnostic: 'TypeScript', lint: 'TSLint' };
 
   return [
-    messageColor.bold(`${types[message.type]} ${severity.toLowerCase()}: `) +
+    messageColor.bold(`Type ${severity.toLowerCase()}: `) +
       (hasGetters ? message.getContent() : message.content) +
       '  ' +
-      messageColor.underline(
-        (message.type === 'lint' ? 'Rule: ' : 'TS') + message.code
-      ),
+      messageColor.underline(`TS${message.code}`),
     '',
     frame,
   ].join(os.EOL);

packages/react-dev-utils/webpackHotDevClient.js

@@ -106,7 +106,7 @@ function handleSuccess() {
     tryApplyUpdates(function onHotUpdateSuccess() {
       // Only dismiss it when we're sure it's a hot update.
       // Otherwise it would flicker right before the reload.
-      tryDismissErrorOverlay();
+      ErrorOverlay.dismissBuildError();
     });
   }
 }
@@ -140,15 +140,19 @@ function handleWarnings(warnings) {
     }
   }
 
-  printWarnings();
-
   // Attempt to apply hot updates or reload.
   if (isHotUpdate) {
     tryApplyUpdates(function onSuccessfulHotUpdate() {
+      // Only print warnings if we aren't refreshing the page.
+      // Otherwise they'll disappear right away anyway.
+      printWarnings();
       // Only dismiss it when we're sure it's a hot update.
       // Otherwise it would flicker right before the reload.
-      tryDismissErrorOverlay();
+      ErrorOverlay.dismissBuildError();
     });
+  } else {
+    // Print initial warnings immediately.
+    printWarnings();
   }
 }
 
@@ -179,12 +183,6 @@ function handleErrors(errors) {
   // We will reload on next success instead.
 }
 
-function tryDismissErrorOverlay() {
-  if (!hasCompileErrors) {
-    ErrorOverlay.dismissBuildError();
-  }
-}
-
 // There is a newer version of the code available.
 function handleAvailableHash(hash) {
   // Update last known compilation hash.

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

@@ -31,7 +31,7 @@ const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent')
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
-const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
 const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 // @remove-on-eject-begin
 const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
@@ -628,10 +628,17 @@ module.exports = function(webpackEnv) {
           typescript: resolve.sync('typescript', {
             basedir: paths.appNodeModules,
           }),
-          async: isEnvDevelopment,
-          useTypescriptIncrementalApi: true,
+          async: false,
           checkSyntacticErrors: true,
           tsconfig: paths.appTsConfig,
+          compilerOptions: {
+            module: 'esnext',
+            moduleResolution: 'node',
+            resolveJsonModule: true,
+            isolatedModules: true,
+            noEmit: true,
+            jsx: 'preserve',
+          },
           reportFiles: [
             '**',
             '!**/*.json',
@@ -642,8 +649,7 @@ module.exports = function(webpackEnv) {
           ],
           watch: paths.appSrc,
           silent: true,
-          // The formatter is invoked directly in WebpackDevServerUtils during development
-          formatter: isEnvProduction ? typescriptFormatter : undefined,
+          formatter: typescriptFormatter,
         }),
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.

packages/react-scripts/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@bluealba/react-scripts",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Configuration and scripts for Create React App.",
   "repository": "facebook/create-react-app",
   "license": "MIT",
   "engines": {
-    "node": ">=8.10"
+    "node": ">=6"
   },
   "bugs": {
     "url": "https://github.com/facebook/create-react-app/issues"
@@ -25,7 +25,7 @@
   "types": "./lib/react-app.d.ts",
   "dependencies": {
     "@bluealba/babel-preset-react-app": "^7.0.0",
-    "@bluealba/eslint-config-react-app": "^3.1.0",
+    "@bluealba/eslint-config-react-app": "^3.1.1",
     "@babel/core": "7.2.2",
     "@svgr/webpack": "4.1.0",
     "babel-core": "7.0.0-bridge.0",
@@ -48,6 +48,7 @@
     "eslint-plugin-react": "7.12.4",
     "eslint-plugin-react-hooks": "^1.2.0",
     "file-loader": "2.0.0",
+    "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "fs-extra": "7.0.1",
     "html-webpack-plugin": "4.0.0-alpha.2",
     "identity-obj-proxy": "3.0.0",

packages/react-scripts/scripts/start.js

@@ -114,24 +114,9 @@ checkBrowsers(paths.appPath, isInteractive)
     }
     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
     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),
-    };
     // Create a webpack compiler that is configured with custom messages.
-    const compiler = createCompiler({
-      appName,
-      config,
-      devSocket,
-      urls,
-      useYarn,
-      useTypeScript,
-      webpack,
-    });
+    const compiler = createCompiler(webpack, config, appName, urls, useYarn);
     // Load proxy config
     const proxySetting = require(paths.appPackageJson).proxy;
     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);